Next.js 11项目中Stylelint无法校验component.module.scss文件问题求助

1. 补齐Stylelint SCSS解析依赖与配置 #

Stylelint v14及以上版本默认仅支持原生CSS文件解析，需手动指定SCSS语法解析器，同时增加.module.scss文件匹配规则：

• 先安装必要依赖：

npm i postcss-scss stylelint-config-prettier -D

• 更新你的.stylelintrc.json配置如下：

{
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-scss"
  ],
  "customSyntax": "postcss-scss",
  "overrides": [
    {
      "files": ["**/*.scss", "**/*.module.scss"],
      "customSyntax": "postcss-scss"
    }
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "indentation": 2,
    "number-leading-zero": null,
    "max-nesting-depth": 10
  }
}

2. 修正Stylelint校验命令 #

检查package.json中的stylelint执行脚本，确保包含所有你需要校验的SCSS文件路径：

{
  "scripts": {
    "lint:style": "stylelint './styles/**/*.{css,scss}' './components/**/*.module.scss'"
  }
}

执行npm run lint:style即可触发所有样式文件校验。

3. 修复编辑器校验不生效问题（VSCode场景） #

如果是本地开发时编辑器没有实时校验.module.scss文件，在VSCode的settings.json中添加如下配置：

{
  "stylelint.validate": ["css", "scss", "postcss"],
  "stylelint.snippet": ["css", "scss", "postcss"]
}

4. 移除废弃配置 #

删除.prettierrc中的stylelintIntegration字段，该配置为Prettier v1.x版本的废弃参数，会导致新的样式校验链路冲突。

校验测试 #

配置修改完成后，执行npx stylelint 你的测试文件路径/xxx.module.scss，如果有样式规则问题会正常输出错误，说明配置生效。

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