Stylelint 能检查 Less 文件，但需安装 postcss-less 解析器并配置 customSyntax，否则因语法不识别而报错；还需在 files 中包含 */.less，且部分规则（如 no-duplicate-selectors）需谨慎启用。
Stylelint 能否直接检查 Less 文件
可以，但需要额外配置解析器。Stylelint 默认只识别标准 CSS 语法，遇到 less 的嵌套、变量（如 @primary-color）、混合（.mixin()）会报错或跳过。必须显式告诉它：“这不是纯 CSS，是 Less”。
关键动作是安装并启用 postcss-less 解析器：
- 运行
npm install --save-dev stylelint postcss-less - 在
.stylelintrc.js或.stylelintrc.json中指定customSyntax: 'postcss-less' - 确保
files字段包含**/*.less（否则 CLI 默认只扫.css）
为什么用了 postcss-less 还报“Unknown word”错误
常见于 Less 特有语法未被正确解析，比如：
-
@import (reference) 'mixins.less';——(reference)是 Less 扩展语法，postcss-less旧版本不支持 -
&:hover { ... }嵌套中出现未闭合的括号或注释格式异常 - 使用了尚未被
postcss-less覆盖的 Less v4+ 新特性（如作用域变量@{var}在嵌套内）
解决办法：
立即学习“前端免费学习笔记（深入）”；
- 升级到
postcss-less@6.0.0+（兼容 Less v4） - 临时禁用特定规则：在出错行加
// stylelint-disable-next-line at-rule-no-unknown - 避免在 Less 中写非标准 CSS 语法（例如自定义 at-rule），Stylelint 不负责校验 Less 逻辑正确性
如何让 Stylelint 和 Less 编译流程不冲突
Stylelint 应该只做代码质量检查，不参与编译。如果把它塞进 Webpack 的 less-loader 链或 Vite 的 preprocess 阶段，容易导致：
- 编辑器保存时重复 lint，卡顿
- 编译失败时错误堆栈混杂 Stylelint 提示，难以定位
- CI 中无法单独运行 lint 检查
推荐解耦方式：
- CLI 独立运行：
npx stylelint 'src/**/*.less'（开发时手动或 pre-commit 触发） - VS Code 中装
stylelint.vscode-stylelint插件，并在插件设置里指定"stylelint.validate": ["css", "less"] - Webpack/Vite 构建阶段不集成 Stylelint，仅保留编译功能；把 lint 当作独立质量门禁
Less 项目中哪些 Stylelint 规则要谨慎启用
部分规则对 Less 场景不友好，开即报错，需调整或关闭：
-
no-duplicate-selectors：Less 中多个.btn可能分布在不同文件，经@import后合并，Stylelint 无法跨文件感知，建议关掉 -
declaration-block-no-duplicate-properties：Less 允许同名属性覆盖（如color: red; color: blue;），用于 fallback 场景，建议设为null或关 -
color-function-notation：Less 自带lighten(@color, 10%)等函数，不是 CSS 颜色函数，此规则不适用，应禁用 -
selector-max-id：Less 中常通过 ID 做模块隔离（#header { .title { ... } }），限制 ID 数量意义不大
真正值得开的是：命名约定类（selector-class-pattern）、缩进（indentation）、单位一致性（length-zero-no-unit）、以及禁用 !important（declaration-no-important）。
Less 的变量和嵌套能力很强，但 Stylelint 不分析语义，只看 AST 结构。别指望它发现“这个变量没被引用”或“嵌套过深”，那是 ESLint + Less 插件的事。重点守住格式底线和可维护性红线就够了。
