stylelint必须用于校验编译后的css而非less源码，因其可检查真实交付物合法性与规范性，而lessc --lint仅限语法层面；ci中需对dist/*/.css执行校验并阻断失败。
不需要对 Less 本身做语法校验，真正要加的是 stylelint 对编译后 CSS 的静态检查 —— 因为 Less 编译器不报错 ≠ 输出的 CSS 合法或符合团队规范。
Less 编译成功但 CSS 无效的常见场景
Less 文件能顺利编译成 CSS，不代表结果可用。比如：
-
@import "missing-file.less";在未启用strictImports: true时静默跳过，导致关键变量或 mixin 缺失，但编译仍成功 -
.btn { margin: 0 auto; }缺少display: block，Less 不管逻辑有效性，stylelint也不会报（它不检查运行时行为），但浏览器里根本居中不了 -
background+: url(a.jpg), url(b.jpg);写成background+: url(a.jpg); url(b.jpg);—— 分号导致 Less 编译失败，但若没接入构建阶段的错误拦截，CI 就会把残缺 CSS 推到生产环境
为什么必须用 stylelint 而不是 lessc --lint
lessc 自带的 --lint 仅检查 Less 语法（如括号匹配、变量拼写），覆盖极窄；而 stylelint 能覆盖真实交付物 —— 即最终生成的 CSS 文件，且规则可定制：
- 禁止使用
!important："declaration-no-important": true - 强制单位一致性：
"length-zero-no-unit": true（margin: 0✅，margin: 0px❌） - 检测未使用的自定义属性：
"custom-property-no-unused": true（配合 PostCSS 插件） - 支持
.vue、.scss、.css统一规则，避免技术栈割裂
CI 中 stylelint 的正确执行时机
不能只在开发阶段靠 IDE 插件或 pre-commit hook，CI 阶段必须独立校验输出 CSS：
- 先跑
lessc src/*.less -o dist/或通过less-loader构建 - 再执行
npx stylelint "dist/**/*.css"—— 注意路径必须指向编译产物，不是源码 - 若项目含
.vue单文件组件，需加"**/*.vue"并配置processor: "stylelint-processor-html" - 失败时直接
exit 1，阻断合并，不依赖人工 review
最容易被忽略的一点：stylelint 规则必须和构建产物严格对齐。比如开了 autoprefixer，就别在 stylelint 里禁用 -webkit- 前缀 —— 规则冲突会让 CI 反复失败，最后只能关掉检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
