Note This loader is no longer under development, we have switched from a loader to a plugin, please use: Sasslint Webpack Plugin

sasslint-loader

sasslint loader for webpack

Install

$ npm install sasslint-loader

Usage

In your webpack configuration

module.exports = {
  // ...
  module: {
    loaders: {
      {
        test: /\s[a|c]ss$/,
        exclude: /node_modules/,
        loader: 'sasslint'
      }
    }
  }
  // ...
}

To avoid issues with processing order, it's preferrable to use the preLoaders module property, so your files get linted before any other loaders are applied.

module.exports = {
  // ...
  module: {
    preLoaders: {
      {
        test: /\s[a|c]ss$/,
        exclude: /node_modules/,
        loader: 'sasslint'
      }
    }
  }
  // ...
}

Options

You can pass a sasslint options yml file directly by adding a sasslint entry in your webpack config for global options:

module.exports = {
  sasslint: {
    configFile: 'path/.sass-lint.yml'
  }
}

Errors and Warnings

By default the loader will auto adjust error reporting depending on sasslint error/warning counts. You can still force this behavior by using emitError or emitWarning options:

emitError (default: false)

Loader will always return errors if this option is set to true.

module.exports = {
  entry: '...',
  module: {
    // ...
  },
  sasslint: {
    emitError: true
  }
}

emitWarning (default: false)

Loader will always return warnings if this option is set to true.

quiet (default: false)

Loader will process and report errors only and ignore warnings if this option is set to true.

module.exports = {
  entry: '...',
  module: {
    // ...
  },
  sasslint: {
    quiet: true
  }
}

failOnWarning (default: false)

Loader will cause the module build to fail if there are any sasslint warnings.

module.exports = {
  entry: '...',
  module: {
    // ...
  },
  sasslint: {
    failOnWarning: true
  }
}

failOnError (default: false)

Loader will cause the module build to fail if there are any sasslint errors.

module.exports = {
  entry: '...',
  module: {
    // ...
  },
  sasslint: {
    failOnError: true
  }
}

Gotchas

ExtractTextPlugin

ExtractTextPlugin will run the loaders a second time, and you will see duplicate logs. To disable this behavior, hide stats for child plugins.

module.exports = {
  entry: '...',
  module: {
    // ...
  },
  stats: {
    children: false
  }
}

NoErrorsPlugin

NoErrorsPlugin prevents Webpack from outputting anything into a bundle. So even sass-lint warnings will fail the build. No matter what error settings are used for sasslint-loader.

So if you want to see sass-lint warnings in console during development using WebpackDevServer remove NoErrorsPlugin from webpack config.

License