stylelint 配置必须放在仓库根目录且统一管理，通过 overrides 按文件路径差异化配置规则，避免子包各自覆盖；需显式声明解析器支持 scss/vue/css-in-js，禁用 .stylelintignore 改用 ignorefiles 字段确保跨环境一致。
Monorepo 下 Stylelint 配置文件该放哪
必须放在仓库根目录，且不能被子包各自覆盖。Stylelint 默认只从当前工作目录向上查找一个配置文件（.stylelintrc.json、stylelint.config.js 等），如果每个 packages/* 里都放一份，CLI 执行时会按 cwd 决定用哪份——结果就是跑 stylelint packages/a/**/*.css 用的是 a 包下的配置，而 CI 脚本在根目录运行 stylelint 'packages/**/*.{css,scss,vue}' 却可能漏掉某些规则或加载失败。
正确做法是：根目录一份统一配置，通过 overrides 按文件路径做差异化处理。例如：
{
"extends": ["stylelint-config-standard"],
"rules": {
"color-hex-case": "lower",
"indentation": 2
},
"overrides": [
{
"files": ["packages/components/**/*.vue"],
"extends": ["stylelint-config-recommended-vue"],
"rules": {
"selector-class-pattern": "^[a-z][a-zA-Z0-9]+(__[a-z][a-zA-Z0-9]+)?(--[a-z][a-zA-Z0-9]+)?$"
}
},
{
"files": ["packages/app-legacy/**/*.scss"],
"extends": ["stylelint-config-standard-scss"],
"rules": {
"at-rule-no-unknown": [true, { "ignoreAtRules": ["extend", "include"] }]
}
}
]
}
注意：overrides 是 Stylelint v14+ 原生支持的字段，不需要额外插件；旧版本需升级或改用 stylelint-config-monorepo 类封装配置。
如何让不同子包共享但不强制相同规则
靠 overrides + 规则粒度控制。比如基础组件库要禁用 !important，但业务项目允许临时覆盖；又比如 Vue 组件要求 <style scoped></style> 内 class 名必须带前缀，而纯 CSS 文件不检查。
关键不是“开/关规则”，而是把规则值设为 null 或条件化：
-
"declaration-no-important": ["packages/components/**"]→ 错误写法，Stylelint 不支持路径白名单 - 正确方式：在
overrides中对packages/components/**单独启用"declaration-no-important": true，其他包不配这条即可 - 若某包需要例外，再套一层
overrides，用更精确的files匹配并设"declaration-no-important": null
避免用 /* stylelint-disable */ 注释绕过——它破坏可追溯性，CI 无法统计违规密度，也掩盖真实约束缺口。
SCSS/Vue/Sass-in-JS 混合时的解析器陷阱
Stylelint v14+ 默认只解析 .css，遇到 .scss 或 .vue 会直接跳过或报 Unknown word 错误。这不是配置问题，是解析器没装。
必须显式声明 customSyntax 或依赖扩展配置自动注入：
- SCSS：装
stylelint-config-standard-scss并extends它，它内部已注册postcss-scss解析器 - Vue SFC：
stylelint-config-recommended-vue自动处理<style lang="scss"></style>和<style></style> - CSS-in-JS（如 styled-components）：必须加
stylelint-config-styled-components，且 CLI 命令中指定--syntax scss或--syntax css-in-js（取决于实际语法）
常见错误：stylelint 'src/**/*.{css,scss}' 但没装 stylelint-config-standard-scss → 所有 SCSS 文件静默跳过，零报错却等于零检查。
为什么 .stylelintignore 在 Monorepo 里容易失效
因为 .stylelintignore 只作用于执行命令时的当前工作目录。你在根目录跑 stylelint packages/**，它读取根目录的 ignore 文件；但某些 CI 工具或脚本会先进入 packages/a 再执行 stylelint src/**，这时它找的是 packages/a/.stylelintignore，而你根本没在那里放文件。
解决方案只有两个：
- 全量 ignore 放根目录
.stylelintignore，用 glob 写绝对路径模式，例如：**/node_modules/**、**/dist/**、packages/*/test/** - 完全不用
.stylelintignore，改用配置里的ignoreFiles字段（v15+ 支持），它是配置的一部分，不受 cwd 影响
最容易被忽略的一点：VS Code 的 Stylelint 插件默认读取当前打开文件所在目录的配置和 ignore 文件，开发时看似正常，一到 CI 就行为不一致——务必在本地模拟根目录执行命令验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
