Add Stylelint to webpack

Adding stylelint to your project has many advantages that range from being able to throw warnings and errors when the styling rules (CSS, SASS-SCSS) are broken, to being able to fix most of your warnings automatically with a single command.


The first step in this process would be to add stylint and it’s webpack plugins as development dependencies to your package.json.

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


Add the following to your webpack config file in the plugins section. Here in this example I am using the default config file name stylelint.rc. This is the file where all your rules would go.

var StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    new StyleLintPlugin({
    configFile: '.stylelintrc',
    context: 'src',
    files: '**/*.css',
    failOnError: false,
    quiet: false,
    emitErrors: true // by default this is to true to check the CSS lint errors


The following is an example stylelint.rc file

  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "after-comment"]
    } ],
    "declaration-colon-space-after": "always",
    "indentation": ["tab", {
      "except": ["value"]
    "max-empty-lines": 2,
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
    "unit-whitelist": ["em", "rem", "%", "s"]

You can choose from the total list of rules here.


You can install the stylelint plugin in your IDE like Intellij from the plugins section. This will help you highlight code issues on the go.


You can fix most of the warnings with a command like the following

stylelint src/**/*.css --fix


You can add this to the scripts section of npm and run it along with your npm builds or from your IDE.