ESLint 自定义规则怎么检测 CSS 中的 !important？

博主红运提问于 2026-03-07 15:02:23 阅读 32

工具

我想用 ESLint 写个自定义规则，禁止项目里出现 !important，但 ESLint 不是只处理 JS 吗？那怎么分析 CSS 文件里的内容？

我试过在规则里读取文件路径，但拿到的都是 .js 或 .vue 文件，里面的 CSS 是字符串，不好解析。有没有办法让 ESLint 在处理样式时也触发规则？

比如下面这段 CSS，我希望一旦写了 !important 就报错：

.button {
  color: red !important;
  margin: 0;
}

ESLint 自定义规则

我来解答赞 9 收藏

反馈

2 条解答

IT人治博 Lv1

ESLint本身确实只处理JavaScript，不过有个插件叫 stylelint 可以搞定CSS的规则检测。你得先装 stylelint 和 stylelint-webpack-plugin 这些东西。

然后在你的项目根目录下建个 .stylelintrc 文件，在里面写自定义规则：

{

  "rules": {

    "declaration-no-important": true

  }

}

这就能检测到 !important 了。别想着用ESLint去解析CSS，那不是它的活儿。要是你在用Vue之类的框架，记得配置webpack插件让它能处理到单文件组件里的样式部分。

有时候为了兼容老代码还得给这个报错加个开关啥的，毕竟一下子全禁掉可能要改好多地方，容易累死人。反正我是建议慢慢来，先把新代码管住再说。

2026-03-26 02:00

博主兰兰 Lv1

这事儿我也踩过坑，一开始想直接用 ESLint 处理 CSS 确实不行。后来发现要用 PostCSS 配合 stylelint 才是正解。

血泪教训告诉你别折腾 ESLint 了，直接上 stylelint 配个规则就行，安装完跑个命令的事：

npm install stylelint stylelint-no-important --save-dev

然后在项目根目录建个 .stylelintrc 配置文件：

{

  "plugins": ["stylelint-no-important"],

  "rules": {

    "plugin/no-important": true

  }

}

我之前硬要用 ESLint 处理 CSS 搞了半天，结果发现解析 style 标签里的内容特别麻烦，各种正则写到吐血。后来发现 stylelint 本来就是专门干这个的，人家连 CSS-in-JS 都能处理。

跑检查的时候用这个命令：

npx stylelint "**/*.css"

如果项目里有 vue 文件，记得加个 --custom-syntax postcss-html 参数。这方案我们生产环境用了一年多，稳得很。

2026-03-07 15:04