Sass Lint Webpack Plugin

1.0.4 verified Sat Apr 25 auth: no javascript

Webpack 4+ plugin that integrates sass-lint to lint SCSS/SASS files during the build process. Version 1.0.4 is the latest stable release. It delegates all linting to the sass-lint peer dependency and supports custom config files, glob patterns, and sass-lint options. Differentiators: lightweight wrapper specifically for Webpack 4+, not a loader but a Build plugin that runs linting on compilation. Requires Webpack 4+ and sass-lint ~1.12.1.

Common errors

error Cannot find module 'sass-lint-webpack' ↓

cause Missing or incorrect installation.

fix

npm install -D sass-lint sass-lint-webpack

error Error: Module does not provide a default export ↓

cause Using import syntax with CommonJS module.

fix

Use const SassLintPlugin = require('sass-lint-webpack')

error Error: Plugin could not be instantiated ↓

cause Missing sass-lint peer dependency.

fix

npm install -D sass-lint

Warnings

gotcha Requires sass-lint as peer dependency; install both. ↓

fix npm install -D sass-lint sass-lint-webpack

gotcha Package uses CommonJS; cannot import with ESM syntax. ↓

fix Use require('sass-lint-webpack') instead of import.

gotcha Only supports Webpack 4+; not compatible with Webpack 3 or lower. ↓

fix Upgrade to Webpack 4+ or use alternative plugins.

deprecated sass-lint is deprecated or unmaintained; consider using stylelint-scss instead. ↓

fix Migrate to stylelint with stylelint-scss plugin.

gotcha No default configuration; will use sass-lint defaults if no config file or options provided. ↓

fix Provide a .sass-lint.yml file or pass options to customize.

Install

npm install sass-lint-webpack

yarn add sass-lint-webpack

pnpm add sass-lint-webpack

Imports

SassLintPlugin

wrong

import SassLintPlugin from 'sass-lint-webpack'

correct

const SassLintPlugin = require('sass-lint-webpack')

CommonJS only; package does not provide ESM exports. Use require().

Quickstart

Shows how to configure SassLintPlugin in webpack.config.js with optional settings.

const SassLintPlugin = require('sass-lint-webpack');

module.exports = {
  // ...
  plugins: [
    new SassLintPlugin({
      // Optional: custom config file path
      configPath: '.sass-lint.yml',
      // Optional: files glob pattern
      files: 'src/**/*.scss',
      // Optional: pass sass-lint options directly
      options: {
        rules: {
          'no-important': 1,
          'indentation': [1, {'size': 2}]
        }
      }
    })
  ]
};