Stylelint规则"unit-no-unknown"报错是Bug还是特性？

我之前也踩过这个坑！Stylelint的unit-no-unknown规则会把Sass映射（map）里的数值当成CSS属性值来校验，哪怕这些数值只是map的键或内部变量、并不直接用于CSS声明，它也会误判为「数值缺少单位」抛出错误。

下面分享几个实用的解决办法：

方案1：针对性配置规则忽略项 #

你可以在.stylelintrc（或项目对应的Stylelint配置文件）里，给unit-no-unknown规则添加忽略逻辑，让它跳过对纯数字值的检查：

{
  "rules": {
    "unit-no-unknown": [true, {
      "ignoreValues": ["/^\\d+$/"  // 用正则匹配并忽略所有纯数字值
      ]
    }]
  }
}

⚠️ 注意：这个配置会全局忽略所有纯数字的CSS值，如果你有其他地方确实需要校验纯数字的合法性，可能需要调整正则更精准地匹配你的场景。

方案2：用字符串包裹映射的键/值 #

如果你的map键不需要参与数值计算，只是作为标识使用，可以给它加上引号转成字符串，这样Stylelint就不会把它当成数值来校验了：

$breakpoints: (
  '320': 320px,
  '768': 768px,
  '1200': 1200px
);

方案3：临时禁用代码块的规则 #

如果只有某一段map代码触发错误，不想全局修改配置，可以用Stylelint的注释指令临时禁用该规则：

/* stylelint-disable unit-no-unknown */
$spacing-scale: (
  0: 0,
  1: 4px,
  2: 8px,
  3: 16px
);
/* stylelint-enable unit-no-unknown */

这样只会忽略这段代码的校验，不会影响项目其他部分的规则执行。

补充：错误原因 #

Stylelint的unit-no-unknown规则默认会扫描所有代码中的数值，包括Sass变量、映射这类预处理器语法内容——它无法智能区分这些数值是用于CSS属性，还是只是预处理器内部的变量/标识，所以会把映射里的纯数字误判为「缺少单位的非法CSS值」。

内容的提问来源于stack exchange，提问作者dmin