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

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

工具

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

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

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

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

ESLint 自定义规则

我来解答赞 0 收藏

反馈

1 条解答

博主兰兰 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