Stylelint 不在 Next.js 中检查 component.module.scss答案

【问题标题】：Stylelint not linting component.module.scss in Next.jsStylelint 不在 Next.js 中检查 component.module.scss
【发布时间】：2021-12-12 02:11:26
【问题描述】：

我有两个项目，一个使用 React (v17.0.2)，另一个使用 Next.js (v11.1.0) 已经使用 Prettier 和 Stylelint 实现了 ESlint。

我的问题是，在 React 项目中，一切都运行顺利且正常，但是在 Next.js 项目中，stylelint 不是 linting component.modules.scss 文件（但其他.css 文件是）。

在 React 中，scss 文件位于 ./src/assets/scss/* 在 Next.js 中的 scss 文件位于 ./styles/*

这些是配置文件的内容：

.eslintrc.json

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": [
    "react", 
    "react-hooks", 
    "jsx-a11y", 
    "only-warn",
    "prettier"
  ],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2021,
    "ecmaFeature": {
      "jsx": true,
      "modules": true
    }
  },
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
    "next"
  ],
  "rules": {
    "camelcase": "off",
    "react/prop-types": "off",
    "react/jsx-curly-newline": ["off", "consistent"],
    "react/jsx-handler-names": "off",
    "react/display-name": ["off"],
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "parser": "flow",
  "semi": false,
  "useTabs": false,
  "editor.formatOnSave": true,
  "stylelintIntegration": true
}

.stylelintrc.json

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

有什么帮助吗？谢谢

【问题讨论】：

标签： next.js eslint prettier stylelint scss-lint

【解决方案1】：

我发现了问题所在；

需要在.vscode/settings.json中添加这个

"stylelint.validate": ["css", "scss", ".module.scss"]

.module.scss 不被视为 .scss，因此将其添加到配置中可以使一切正常

【讨论】：