Less语法校验必须在构建前完成，需用stylelint+less-plugin-stylelint在install后、build前独立执行；--syntax less不可省；--lint验证变量；禁用!important；规则固化命名与嵌套规范。
Less语法校验必须在构建前完成
Less不是运行时解析的，它在构建阶段就被编译成CSS。如果语法错误（比如漏掉;、嵌套层级过深、变量未定义）没被提前捕获，就会导致pnpm build失败，中断整个CI流程。这不是“能不能跑”的问题，而是“连CSS都出不来”的阻断性错误。
所以校验不能放在构建后，也不能靠人工肉眼检查.less文件——必须作为独立步骤插入到install之后、build之前。
用stylelint + less-plugin-stylelint做静态检查
stylelint本身不原生支持Less语法树解析，直接对.less文件运行会报Unknown word或跳过嵌套规则。必须搭配less-plugin-stylelint插件，让Less编译器在解析阶段就把AST交给stylelint处理。
- 安装：运行
pnpm add -D stylelint less-plugin-stylelint - 配置
.stylelintrc.json，启用less语法支持：{ "extends": ["stylelint-config-standard"], "customSyntax": "postcss-less", "rules": { "at-rule-no-unknown": [true, { "ignoreAtRules": ["define", "media"] }], "no-empty-source": null } } - 在CI中加一步：
stylelint "**/*.less" --syntax less（注意--syntax less不可省，否则仍按CSS解析）
避免把lint塞进webpack构建流程
有人会在vue.config.js或webpack.config.js里配stylelint-webpack-plugin，这在本地开发时看似方便，但在CI中会带来三个实际问题：
立即学习“前端免费学习笔记（深入）”；
- 构建失败时错误堆栈混杂，分不清是Less语法错还是CSS规则错
- 插件默认只检查入口文件引入的Less，容易漏掉未被引用的组件样式文件
- 和缓存策略冲突：
pnpm install缓存了node_modules，但插件依赖的postcss-less版本可能因lockfile微变而失效
CI里应坚持“职责分离”：stylelint只做代码检查，lessc或vue-cli-service build只做编译输出。
检查变量定义与作用域一致性
Less里常见的隐性问题不是语法错，而是变量拼写错误或跨文件作用域混乱，比如@primary-color在variables.less里定义，但在button.less里误写成@primary-colour——这不会报语法错误，但会导致编译后CSS值为空或回退到默认值。
这类问题需靠stylelint的custom-property-pattern和value-keyword-case等规则约束，更关键的是在CI中强制执行：
- 加一条检查命令：
lessc --lint src/styles/*.less > /dev/null（--lint模式会验证变量是否可解析，不生成输出） - 配合
stylelint启用scss/dollar-variable-pattern类规则（通过stylelint-scss插件），虽然叫SCSS，但对Less变量命名同样有效 - 禁止
!important在Less中出现："declaration-no-important": true，防止覆盖逻辑失控
真正难的不是发现单个Less错误，而是让所有团队成员写的.less在进入CI前就遵循同一套变量命名、嵌套深度、mixin调用规范——这得靠stylelint规则固化，而不是靠PR评论提醒。
