Stylelint 能检查 .scss 文件，但需安装 stylelint-scss、配置 customSyntax: "postcss-scss" 并在 overrides 中指定 .scss 文件规则，否则会因语法不识别而报错；Vue SFC 中的 <style lang="scss"> 还需额外配置处理器插件。
Stylelint 能否直接检查 .scss 文件
能，但默认不生效。Stylelint 本身只处理 CSS 语法，对 @mixin、$variable、嵌套选择器等 Sass 特有语法无感知——它看到的是编译后的 CSS，不是源码。所以直接运行 stylelint src/**/*.scss 通常会报大量 Unknown word 或 Unexpected token 错误。
真正起作用的方式是：先用 Sass 编译器（如 sass CLI 或 node-sass）把 .scss 转成 .css，再让 Stylelint 检查生成的 CSS；或者，更常用的是，借助 postcss-sass 或 stylelint-scss 插件，让 Stylelint 在解析阶段“假装理解” Sass 语法。
推荐走插件路线，因为：
- 不依赖额外编译步骤，检查快
- 能定位到 .scss 原文件行号
- 支持 Sass 特有规则（比如 scss/dollar-variable-pattern）
- 和编辑器（VS Code）、CI 流程集成更顺
必须安装的三个核心依赖
缺一不可，否则 stylelint 对 .scss 的检查就是摆设：
-
stylelint：主程序（v16+ 推荐） -
stylelint-scss：提供 Sass 专属规则和语法支持（如检查$变量命名、@mixin使用） -
stylelint-config-standard-scss或stylelint-config-sass-guidelines：开箱即用的规则集（后者更贴合 Sass 社区习惯）
安装命令示例：
立即学习“前端免费学习笔记（深入）”；
npm install --save-dev stylelint stylelint-scss stylelint-config-sass-guidelines
注意：stylelint-config-sass-guidelines 是专为 Sass 设计的配置，它禁用了部分纯 CSS 规则（如 color-no-invalid-hex），并启用了 scss/at-rule-nested-empty-line-before 这类嵌套友好规则。
配置文件里最容易漏掉的两项
很多人配完依赖就跑 npx stylelint src/**/*.scss，结果还是报错或没效果。问题常出在以下两处：
第一，.stylelintrc.cjs 中没声明 customSyntax：
module.exports = {
extends: ["stylelint-config-sass-guidelines"],
plugins: ["stylelint-scss"],
customSyntax: "postcss-scss", // ← 必须加！否则 parser 仍按 CSS 解析
};第二，没在 overrides 里单独指定 .scss 文件的规则：
overrides: [
{
files: ["**/*.scss"],
rules: {
"scss/dollar-variable-colon-newline-after": "always",
"scss/at-extend-no-missing-placeholder": true,
}
}
]不加 overrides，stylelint-scss 的规则可能不会被触发；不设 customSyntax，整个文件会被当成非法 CSS 直接跳过。
Vue 单文件组件里的 <style lang="scss"> 怎么检查
Stylelint 默认不处理 Vue SFC 内的 <style> 块。要让它生效，得加一个解析器插件：
- 安装
stylelint-processor-html（旧版 Vue CLI）或@stylelint/processor-styled-components（新版） - 在配置中启用处理器：
processor: "stylelint-processor-html" - 确保
files匹配包含**/*.vue
但要注意：Vue SFC 中的 $ 符号存在双重含义（Sass 变量 vs Vue 响应式属性），stylelint-scss 有时会误报 scss/dollar-variable-pattern。此时建议在对应行加注释忽略：
// stylelint-disable scss/dollar-variable-pattern $primary-color: #007bff; // ← 这行没问题
真正容易被忽略的点是：Sass 变量定义位置。Stylelint 不检查变量是否在 @import 之前定义，但它会检查变量是否被重复声明——而 Vue SFC 的 <style scoped> 会让每个组件的 $ 变量作用域隔离，这种隔离无法被 Stylelint 静态识别，只能靠人工约定或 ESLint + eslint-plugin-vue 联合校验。
