直接用stylelint检查.scss文件可行，但必须安装stylelint-scss插件、配置customSyntax:"postcss-scss"，并在overrides中单独指定.scss规则；否则因无法解析Sass语法会报Unknown word等错误。
直接用 stylelint 检查 .scss 文件本身就行，但必须配对插件和语法解析器，否则会报一堆 Unknown word 或 Unexpected token 错误——这不是规则没生效，是 Stylelint 根本没看懂 SCSS 语法。
为什么 stylelint src/**/*.scss 会报错
Stylelint 默认只认标准 CSS 语法。遇到 $color: red;、@mixin clearfix 或嵌套写法时，它会当成非法 token 直接抛错。它不是“检查不严”，而是压根不支持解析 SCSS 源码。
- 必须安装
stylelint-scss插件，提供 SCSS 特有规则（如scss/dollar-variable-pattern） - 必须设置
customSyntax: "postcss-scss"，让 Stylelint 用 postcss-scss 解析器读 .scss 文件 - 若项目含 Vue SFC 的
<style lang="scss">，还得加stylelint-processor-html或对应处理器 - 规则配置要放在
overrides里单独指定.scss文件，避免影响纯 CSS
如何配置才能真正生效
在 .stylelintrc.json 中这样写：
{
"customSyntax": "postcss-scss",
"overrides": [
{
"files": ["**/*.scss"],
"rules": {
"block-no-empty": true,
"scss/dollar-variable-pattern": "^_?[a-z][a-z0-9]*(-[a-z0-9]+)*$",
"declaration-block-trailing-semicolon": "always"
}
}
]
}
注意：不要把 customSyntax 放进 overrides 里，它必须是顶层字段；postcss-scss 要提前 npm install --save-dev postcss-scss，否则启动就失败。
立即学习“前端免费学习笔记（深入）”；
CI/编辑器里怎么触发检查
命令行跑检查：npx stylelint "**/*.scss"，配合 --fix 自动修复部分问题；VS Code 装 Stylelint 插件后，保存时自动标红错误行。
- Vue 项目中，若
<style lang="scss">报错，说明没装stylelint-processor-html或没在配置里声明processors - Webpack/Vite 构建流程里，别在 Sass loader 后再塞 Stylelint loader——那是检查编译后的 CSS，定位不到源文件行号
- 想拦截空选择器（如
.empty {}），靠block-no-empty就够了，不用额外 PostCSS 插件
真正的难点不在配置，而在于团队是否统一了 @use 路径写法、变量命名习惯和嵌套深度控制——Stylelint 只能抓出表层问题，深层逻辑漏洞还得靠人盯住 @if 分支和 @each 边界条件。
