scss-lint-loader

1.0.1 verified Fri May 01 auth: no javascript deprecated

Webpack loader that runs scss-lint to enforce SCSS best practices. This package (v1.0.1) is a thin wrapper around scss-lint, with no active development since 2017. It lacks support for modern Webpack 5+, and scss-lint itself was deprecated and replaced by stylelint. Use 'stylelint-webpack-plugin' instead. Release cadence: no releases since initial 1.0.0/1.0.1.

Common errors

error Module not found: Error: Can't resolve 'scss-lint' ↓

cause scss-lint executable not installed or not in PATH.

fix

Install scss-lint: npm install -g scss-lint or npm install --save-dev scss-lint

error Error: scss-lint configuration file not found ↓

cause Default config file (.scss-lint.yml) missing.

fix

Create a .scss-lint.yml or specify config option in loader.

error Error: Cannot find module './dist/loader' ↓

cause Using the package incorrectly (direct require instead of loader).

fix

Use as a Webpack loader string, not a direct require.

Warnings

deprecated scss-lint is deprecated; use stylelint instead. This loader will not work with scss-lint anymore. ↓

fix Migrate to stylelint-webpack-plugin with appropriate SCSS rules.

gotcha This loader expects scss-lint to be installed globally or in node_modules. If scss-lint is not found, it silently fails. ↓

fix Ensure scss-lint is installed: npm install -g scss-lint or npm install --save-dev scss-lint.

breaking Does not support Webpack 5 module federation or persistent caching. May cause build errors. ↓

fix Use stylelint-webpack-plugin or disable the loader.

Install

npm install scss-lint-loader

yarn add scss-lint-loader

pnpm add scss-lint-loader

Imports

default

wrong

const scssLintLoader = require('scss-lint-loader');

correct

module.exports = { module: { rules: [{ test: /\.scss$/, loader: 'scss-lint-loader' }] } }

scss-lint-loader is used as a Webpack loader via configuration, not imported directly.

config

/* webpack.config.js */
{ test: /\.scss$/, loader: 'scss-lint-loader', options: { config: '.scss-lint.yml' } }

Options are passed via Webpack's options object.

use

module.exports = { module: { rules: [{ test: /\.scss$/, use: ['scss-lint-loader'] }] } }

Can also use 'use' syntax with array.

Quickstart

Shows how to configure scss-lint-loader in Webpack to lint SCSS files using a custom config file and fail on errors.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'scss-lint-loader',
        options: {
          config: '.scss-lint.yml',
          failOnError: true
        }
      }
    ]
  }
};