stylelint为什么检测不到PostCSS自定义属性的拼写错误？

IT人子萱提问于 2026-02-08 07:10:23 阅读 92

工具

我在用PostCSS处理CSS变量时遇到问题，stylelint没有报错但明显变量名拼写错了。比如下面这段代码：


<style>
:root {
  --main-color: #ff6b6b;
}

.button {
  background: var(--main-colr); /* 少写了一个'o' */
}
</style>

已经安装了stylelint-config-standard和stylelint-declaration-block-no未知variables，配置文件里也启用了”plugin:postcss”。但保存时编辑器完全没提示错误，手动运行stylelint命令行也返回0错误。试过把var改为颜色值就能报错，但变量检查就是失效。

我来解答赞 6 收藏

反馈

2 条解答

___付敏 Lv1

问题出在你装的插件名字上，应该是 stylelint-declaration-block-no-unknown-properties，但你写成了“no未知variables”，明显是拼写错了，而且这个插件本身也不支持自定义属性校验。

要做校验 PostCSS 的自定义变量拼写错误，得用专门处理 CSS 自定义属性的插件，比如 stylelint-csstree-validator 或者更推荐的 stylelint-declaration-use-variable。

最靠谱的方案是使用 stylelint-csstree-validator，它基于 CSSTree 能检测 var() 引用是否存在对应定义。安装：

npm install --save-dev stylelint-csstree-validator

然后在 .stylelintrc 里加上：

{

  "plugins": ["stylelint-csstree-validator"],

  "rules": {

    "csstree/validator": true

  }

}

这样再运行 stylelint 就能抓出 --main-colr 这种拼写错误了。注意别被那些年久失修的插件坑了，很多社区插件对现代 CSS 变量支持很差。另外确保你的 stylelint 版本是 14+，老版本对 PostCSS 支持不完整。

2026-02-09 15:04

欧阳春彦 Lv1

stylelint 默认的规则集是识别不了 CSS 自定义属性（也就是你写的 --main-colr）拼写错误的，因为变量本身是允许动态拼接和作用域嵌套的，stylelint 不会追踪你 var() 用的是哪个 :root 定义的变量。

你说的 stylelint-declaration-block-no-unknown-variables 这个插件其实可以，但默认只检测 SCSS 或 Less 的变量，不处理 CSS 自定义属性。你需要改一下插件的配置，加上 ignoreVariables: false 才能启用对 CSS 变量的检查。

另外，你提到启用了 plugin:postcss，这个配置是误导的，stylelint 本身是纯 CSS 检查工具，不需要额外指定 PostCSS 插件来处理变量逻辑。

正确的解决方式是加装 stylelint-declaration-block-no-unknown-variables 插件，并在 .stylelintrc 里这样配：

{

  "plugins": [

    "stylelint-declaration-block-no-unknown-variables"

  ],

  "rules": {

    "plugin/declaration-block-no-unknown-variables": true

  }

}

这样你写错变量名，比如 --main-colr 就会报错了。

如果你还想支持变量作用域检查（比如在某个组件里定义的变量），目前 stylelint 本身的生态还不支持那么细粒度的分析，可以考虑写个自定义规则或者用 TypeScript + CSS-in-JS 那套生态来强制变量引用。不过对大多数项目来说上面这个插件已经够用了。

2026-02-08 08:01