Stylelint not linting component.module.scss in Next.js

Question

I two projects, one with React (v17.0.2) and the other with Next.js (v11.1.0) In both I have implemented ESlint with Prettier and Stylelint.

My problem is that in React project everything is working smoothly and fine, however in Next.js project, stylelint is not linting component.modules.scss files (but other.css files are).

In React, scss files are in ./src/assets/scss/* in Next.js scss files are in ./styles/*

These are the config files content:

.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
  }
}

Any help please? Thanks

Answer 1

I found what was wrong;

Need to add this in .vscode/settings.json

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

.module.scss was not considered as .scss, so adding it to the config made everything works