I want to add Stylelint to my Next.js app. I am asking if I can edit next.config.js to add stylelint-webpack-plugin, so I get styles errors during pilation.

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

I want to add Stylelint to my Next.js app. I am asking if I can edit next.config.js to add stylelint-webpack-plugin, so I get styles errors during pilation.

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

• javascript
• css
• webpack
• next.js
• stylelint

Share Improve this question Follow edited Oct 15, 2022 at 7:30 Youssouf Oumar asked Nov 30, 2021 at 3:56 Youssouf OumarYoussouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Prepare the setup for both CSS and SCSS

1. Install needed packages:

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

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

node_modules

3. Edit the 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;
  },

};

Set up Stylelint with CSS

1. Install the needed package:

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

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

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

Set up Stylelint with SCSS

1. Install needed packages:

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

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

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