How to set up Stylelint in a Next.js project?

Issue

I want to add Stylelint in my Next.js app. I am asking if I can edit next.config.js to add stylelint-webpack-plugin.

// next.config.js
module.exports = {
  reactStrictMode: true,
};

Solution

Here is how you could add Stylelint for both CSS and SCSS. There is those simple 4 steps to follow.

1. Step one:

npm i stylelint stylelint-config-standard stylelint-webpack-plugin --save-dev

2. Create .stylelintrc file in your root folder et past in it:

{
 "extends": "stylelint-config-standard",
 "rules": {
   "string-quotes": "double"
  }
}

3. Create .stylelintignore file in your root folder et past in it:

node_modules

4. Edit next.config.js file:

const StylelintPlugin = require("stylelint-webpack-plugin"); // line to add
module.exports = {
  reactStrictMode: true,
      
  // lines to add
  webpack: (config, options) => {
    config.plugins.push(new StylelintPlugin());
    return config;
  },

};

And you are good to go. Now if you wanna use scss instead of css, all you have to do is:

npm i sass stylelint-config-standard-scss --save-dev

and update your .stylelintrc file by changing this line:

"extends": "stylelint-config-standard"

with this one:

"extends": "stylelint-config-standard-scss"

Answered By - yousoumar