stylelint配置文件不生效需确认位置和导出方式：必须位于当前工作目录，文件名为stylelint.config.js等合法名称，且用module.exports导出对象；团队协作推荐stylelint-config-standard或stylelint-config-recommended；vs code需手动配置stylelint.validate支持vue等语言；ci报模块未找到需确保本地安装依赖并验证require。
Stylelint 配置文件不生效？先确认位置和导出方式
运行 npx stylelint *.css 没报错也没提示，大概率是配置根本没加载。Stylelint 不会向上查找父目录的配置，只认当前工作目录下的合法文件名和导出格式。
必须满足三个条件：
- 文件名是
stylelint.config.js、.stylelintrc.js或stylelint.config.cjs（ESM 项目慎用.mjs） - 导出的是 plain object，不是函数或
export default（除非你明确需要动态逻辑） - 用
module.exports = { rules: { ... } }，别混用 ES Module 语法
正确示例：
module.exports = {
extends: ['stylelint-config-standard'],
rules: {
'color-no-invalid-hex': true,
'declaration-block-trailing-semicolon': 'always'
}
};
项目混用 CSS/SCSS/Less？用 overrides 分开配置
直接在 rules 里写死路径（比如 "**/*.scss"）是反模式。Stylelint 的 overrides 字段才是官方推荐的多语言处理方式，它能按扩展名精准启用插件和规则。
常见错误是装了 stylelint-scss 却没在 overrides 中启用，结果 SCSS 文件里一堆 unknown word 报错。
推荐写法：
module.exports = {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-scss'],
overrides: [
{
files: ['**/*.scss'],
extends: ['stylelint-config-scss'],
rules: {
'scss/dollar-variable-pattern': '^var_',
'scss/at-rule-no-unknown': true
}
},
{
files: ['**/*.css'],
rules: {
'color-no-invalid-hex': true,
'length-zero-no-unit': true
}
}
]
};
哪些规则最值得开？从易出 Bug 的场景倒推
别一上来就全开默认规则。先聚焦三类高频低级错误，它们零成本、高收益：
-
property-no-unknown：捕获dispay: flex这类拼写错误 -
length-zero-no-unit：拦截margin: 10（缺单位）导致的渲染异常 -
declaration-block-no-duplicate-properties：防同一选择器里重复写color
再加两个实用项：
-
color-no-invalid-hex能立刻发现#fg0000这种无效色值 -
declaration-no-important全局开启，但允许用/* stylelint-disable declaration-no-important */在覆盖第三方样式时临时绕过
VS Code 里 Stylelint 插件不提示？检查 validate 语言支持
VS Code 官方 Stylelint 插件默认只校验 .css 和 .html 中的 <style></style>，对 .scss、.vue 等需手动配置 stylelint.validate。
打开 VS Code 设置（Cmd + ,），搜索 stylelint.validate，添加对应语言 ID：
-
scss（对应.scss文件） -
postcss（部分 Vue 项目需要） -
vue（若用stylelint-config-recommended-vue）
如果用了 stylelint-config-recommended-vue，还要确保已安装该包，否则 <style lang="scss"></style> 块里的 SCSS 语法仍不会被识别。
Monorepo 场景下最容易被忽略的一点：不同子包可能需要不同的 overrides 组合，比如组件库禁用 !important，而业务页要允许特定覆盖。这时不能只靠一套根配置，得在各 packages/*/ 下放局部 stylelint.config.js 并用 extends 复用公共规则——否则 lint 结果会漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
