SCSS Config Webpack Plugin

2.0.3 verified Sat Apr 25 auth: no javascript maintenance

A webpack plugin that provides a preset SCSS configuration, including sass-loader, postcss-loader, autoprefixer, and css-loader with source maps and mini-css-extract-plugin support. The current stable version is 2.0.3 (released 2022-09-01). It works with webpack >=4.36.0 and Node.js >=10. It is part of the merkle-open webpack-config-plugins suite. Unlike manual SCSS setups, this plugin aims to reduce boilerplate by pre-configuring common loaders and options. However, it abstracts away configuration details which may lead to conflicts with custom loaders.

Common errors

error Error: Cannot find module 'scss-config-webpack-plugin' ↓

cause Package not installed or not in node_modules.

fix

Run npm install scss-config-webpack-plugin --save-dev (or yarn/dedupe).

error TypeError: ScssConfigWebpackPlugin is not a constructor ↓

cause Importing with ES6 import syntax instead of require.

fix

Use const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');.

error Module not found: Error: Cannot resolve 'file' or 'directory' ./scss-config-webpack-plugin ↓

cause Typo in plugin name or path when using relative require.

fix

Ensure the package name is spelled correctly in the require statement.

error ValidationError: Invalid options object. SCSS Config Webpack Plugin has been initialized using an options object that does not match the API schema. ↓

cause Passing invalid options to the plugin constructor.

fix

Check the plugin documentation for valid options. Common mistake: passing a string instead of an object.

Warnings

gotcha The plugin assumes mini-css-extract-plugin is installed and configured. If not, CSS extraction may fail silently. ↓

fix Install mini-css-extract-plugin and ensure it's added to both plugins and loaders.

gotcha The plugin overrides the `style` loader; if you have custom CSS loaders before it, they may be ignored or conflict. ↓

fix Avoid mixing with other SCSS/CSS loaders. Remove any existing sass-loader, css-loader, style-loader configuration.

deprecated The plugin uses `sass-loader` options that may not be compatible with sass-loader v11+. Specifically, `prependData` was renamed to `additionalData`. ↓

fix Update to sass-loader >=11 and manually patch the plugin options if needed, or lock sass-loader to v10.

gotcha The plugin assumes Node >=10 and npm >=6; older versions will cause cryptic errors during installation. ↓

fix Upgrade Node and npm to meet minimum requirements.

breaking In version 1.x, the plugin exported a different internal API. Upgrading from 1.x to 2.x may break custom integrations that directly access plugin properties. ↓

fix Review changelog and update any internal references to plugin internals.

Install

npm install scss-config-webpack-plugin

yarn add scss-config-webpack-plugin

pnpm add scss-config-webpack-plugin

Imports

ScssConfigWebpackPlugin

wrong

import ScssConfigWebpackPlugin from 'scss-config-webpack-plugin';

correct

const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');

CJS only; there is no ESM export. Do not use import syntax.

default

wrong

const { ScssConfigWebpackPlugin } = require('scss-config-webpack-plugin');

correct

const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');

The plugin is exported as a single default export, not a named export.

new

wrong

new ScssConfigWebpackPlugin.Plugin()

correct

new ScssConfigWebpackPlugin()

No nested constructor.

Quickstart

Minimal usage: add the plugin to webpack config. Requires webpack >=4.36.0 and Node >=10.

const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');

module.exports = {
  plugins: [
    new ScssConfigWebpackPlugin()
  ]
};