Angular项目StyleLint SCSS未知规则错误的解决与抑制方法

嘿，刚接触SCSS代码校验遇到这种问题太正常了，我来帮你捋清楚怎么搞定它。

你看到的这两个错误提示——Unknown rule at-rule-disallowed-list和Unknown rule declaration-property-value-disallowed-list，本质是Stylelint找不到对应的规则定义，大概率是两种情况：要么你的配置里（可能继承了Angular默认的Stylelint配置）自动启用了这两个规则，但你的Stylelint版本不支持；要么这些规则被默认加载，但你没明确处理它们。

给你两个实用的解决办法：

方法一：直接在配置里禁用这两个规则 #

既然你不需要这两个规则的校验，直接在你的.yml配置文件里把它们设为null，告诉Stylelint不要加载这些规则就行：

rules:
  declaration-no-important: null
  scss/at-rule-no-unknown: null
  at-rule-disallowed-list: null
  declaration-property-value-disallowed-list: null

保存后重新执行stylelint **.scss，这两个警告应该就消失了。

方法二：更新Stylelint到兼容版本 #

如果你的Stylelint版本比较老旧，可能不支持at-rule-disallowed-list和declaration-property-value-disallowed-list这两个核心规则。先运行下面的命令查看当前版本：

stylelint --version

如果版本低于v14，建议更新到最新稳定版：

npm install stylelint@latest --save-dev
# 用yarn的话执行这个
yarn add stylelint@latest --dev

更新完成后再执行lint命令，Stylelint就能正常识别这些规则了（如果之后需要启用它们的话也没问题）。

补充说明：为什么构建能过但有警告？ #

Angular CLI默认不会把Stylelint的警告/错误当成构建失败的触发条件，所以你能正常完成构建，但lint命令本身会严格检查配置规则，所以会输出这些错误提示。

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