Stylelint处理Sass字体嵌套属性时出现解析错误求助

这个问题我之前处理过，核心原因是stylelint默认使用的是标准CSS解析器，无法识别Sass特有的嵌套属性语法，得通过以下几步调整来解决：

1. 安装兼容的Sass扩展插件 #

stylelint本身不原生支持Sass语法，需要安装stylelint-scss插件。但注意你的stylelint版本是8.4.0（比较老旧），不能装最新版的stylelint-scss，得选兼容8.x的版本，比如2.5.0：

npm install stylelint-scss@2.5.0 --save-dev

2. 配置stylelint以支持SCSS语法 #

有两种方式配置：

方式一：通过配置文件（推荐） #

在项目根目录创建或修改.stylelintrc文件，指定语法为scss并引入插件：

{
  "syntax": "scss",
  "plugins": ["stylelint-scss"],
  "rules": {
    // 保留你原有的stylelint规则，也可以添加scss专属规则
  }
}

方式二：直接在CLI命令中指定语法 #

如果不想修改配置文件，每次检查时可以加上--syntax scss参数：

stylelint foo.scss --syntax scss

原理说明 #

当指定scss语法后，stylelint会切换使用postcss-scss解析器，它能正确识别Sass的嵌套属性（比如你写的.foo { font: { family: arial; weight: 600; } }），也就不会再抛出"Cannot parse selector"的错误了。

执行完上述步骤后，再运行stylelint检查你的foo.scss，应该就能正常通过语法校验了。

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