Stylelint 13.12.0无法识别SCSS的@use规则报错如何解决？

核心原因 #

Stylelint 默认仅支持标准 CSS 语法的 At 规则，默认不会识别 Sass 专属的@use、@forward等语法，并非完全不支持该规则，只需配置Sass专属的适配规则集即可解决。

解决步骤（Angular项目适用） #

• 第一步：安装SCSS专属的Stylelint规则配置包
  执行对应包管理器的安装命令：

  # npm
  npm install --save-dev stylelint-config-standard-scss
  # yarn
  yarn add --dev stylelint-config-standard-scss
  # pnpm
  pnpm add -D stylelint-config-standard-scss
  

• 第二步：修改Stylelint配置文件
  找到项目根目录下的Stylelint配置文件（通常为.stylelintrc、.stylelintrc.json、.stylelintrc.js中的任意一个），在extends配置项中追加stylelint-config-standard-scss，示例配置如下：

  {
    "extends": [
      // 保留你原有继承的其他配置，比如基础标准配置、Angular专属stylelint配置
      "stylelint-config-standard-scss"
    ]
  }
  

  该配置包会自动完成适配：
  • 切换为SCSS语法解析器，识别所有Sass专属语法
  • 禁用原生通用的at-rule-no-unknown规则，替换为Sass专属的scss/at-rule-no-unknown规则，会自动兼容@use、@forward等合法的Sass At规则，不需要你手动禁用任何校验规则
• 第三步：重新执行Stylelint校验命令，原有报错就会消失

官方演示站报错说明 #

Stylelint官方演示站默认使用标准CSS校验配置，没有启用SCSS适配，才会出现相同报错。只要在演示站的配置面板手动切换为SCSS解析器、引入SCSS规则集即可消除报错。

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