VS Code编写SCSS使用accent-color报未知属性警告如何解决？

• 该警告属于VS Code的SCSS语法校验工具的误报，通常来自VS Code内置的CSS语言服务，或是你安装的Stylelint、SCSS校验类插件。accent-color是CSS Color Module Level 4新增的标准属性，2021年才完成浏览器全量稳定支持，如果你使用的校验工具版本较旧，其收录的合法CSS属性列表没有更新到包含该属性，就会触发误报。
• 这个警告不影响代码编译和浏览器端的样式生效，仅属于编辑器层面的校验提示。

方法1：更新编辑器及相关插件 #

• 将VS Code升级到最新正式版本，VS Code内置的CSS/SCSS语言服务会定期同步最新的CSS标准属性，新版本默认已经收录accent-color，不会再触发警告。
• 如果你安装了Stylelint、SCSS IntelliSense等第三方校验、智能提示插件，同步将这些插件升级到最新版本即可。

方法2：修改校验配置忽略规则 #

如果暂时不想升级，可以手动调整校验规则，将accent-color加入合法属性列表：

针对VS Code内置校验 #

打开VS Code的settings.json配置文件，添加如下内容：

// 全局将accent-color加入SCSS/CSS合法属性列表
"css.lint.validProperties": ["accent-color"],
"scss.lint.validProperties": ["accent-color"]

针对Stylelint校验 #

如果项目接入了Stylelint校验，在项目根目录的Stylelint配置文件（如.stylelintrc、.stylelintrc.json）中添加规则：

{
  "rules": {
    "property-no-unknown": [true, {
      "ignoreProperties": ["accent-color"]
    }]
  }
}

方法3：单行抑制警告 #

如果只想忽略单处的警告提示，可以在对应代码行添加校验抑制注释：

.checkbox-custom input[type="checkbox"] {
    // ...
    accent-color: $brand-pink; // stylelint-disable-line property-no-unknown
}

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie