优先用.stylelintrc.js配置，因支持注释、条件逻辑和动态规则；需显式启用stylelint-scss插件并加入plugins字段，否则scss中@mixin、$var等语法会报unknown word错误。
直接结论：用 .stylelintrc.js 配置，overrides 分开处理 CSS/SCSS，必须显式启用 stylelint-scss 插件并加入 plugins 字段，否则 SCSS 文件里 @mixin、$var 全部报 unknown word 错误。
为什么 .stylelintrc.js 是唯一靠谱选择
JSON 配置在真实项目中很快会失效：没法注释说明某条规则为何关闭，不能根据环境（如是否是组件库）动态开关 declaration-no-important，更没法 require 团队共享的规则包。JS 文件只需导出一个含 rules 或 extends 的对象即可，例如：
module.exports = {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-scss'],
rules: {
'color-hex-case': 'lower',
},
overrides: [
{
files: ['**/*.scss'],
rules: {
'scss/dollar-variable-pattern': '^var_',
}
}
]
};
- 常见错误是只写
module.exports = {}却没填rules或extends，配置静默失效 - 用了
overrides却漏掉files字段，SCSS 文件根本不会被扫描 - 把
stylelint-scss装了但没加进plugins数组，插件规则压根不加载
stylelint-scss 插件必须手动配全三要素
光装包不够，必须同时满足：安装、声明、启用。缺一不可，否则 @each、%placeholder 全当语法错误报。
- 安装命令：
npm install --save-dev stylelint-scss - 配置里加
plugins: ['stylelint-scss'] - 在
overrides或顶层rules中启用具体规则，例如'scss/at-rule-no-unknown': true - 若用
stylelint-config-standard-scss，它已内置部分规则，但仍需确保plugins字段存在且值正确
VS Code 和命令行对 SCSS 的支持差异
命令行跑通 npx stylelint "**/*.scss" ≠ 编辑器里有提示。VS Code 默认只校验 .css，必须手动补全语言支持。
- VS Code 的
settings.json中，stylelint.validate必须设为["css", "scss"]，不能只写["css"] - WebStorm 用户需在 Stylelint 设置里把 “Run for files” 改成
**/*.css;**/*.scss，改完必须重启 IDE - Sublime Text 用户要在
SublimeLinter → Settings里确认linters.stylelint的extensions包含scss - CI 脚本里别漏掉扩展名：
npx stylelint "**/*.{css,scss,vue}"
最容易被忽略的兼容性细节
SCSS 变量、嵌套、混合指令不是标准 CSS，Stylelint v14+ 默认不解析它们——这和你本地是否装了插件无关，而是解析器层面的限制。
-
property-no-unknown默认不检查$color，要校验变量名得靠scss/dollar-variable-pattern -
@use和@forward（Dart Sass 新语法）需要stylelint-scssv4.3+，旧版本会误报 - 自定义属性（
--primary）和 SCSS 变量（$primary）是两套体系，规则不能混用 -
.stylelintignore对 SCSS 同样生效，但路径匹配基于 glob，dist/**/*.scss这种写法必须测试验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
