{"id":20541,"library":"scss-config-webpack-plugin","title":"SCSS Config Webpack Plugin","description":"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.","status":"maintenance","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/merkle-open/webpack-config-plugins","tags":["javascript","sass","scss","css","libsass","webpack","loader"],"install":[{"cmd":"npm install scss-config-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add scss-config-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add scss-config-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required to install","package":"webpack","optional":false}],"imports":[{"note":"CJS only; there is no ESM export. Do not use import syntax.","wrong":"import ScssConfigWebpackPlugin from 'scss-config-webpack-plugin';","symbol":"ScssConfigWebpackPlugin","correct":"const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');"},{"note":"The plugin is exported as a single default export, not a named export.","wrong":"const { ScssConfigWebpackPlugin } = require('scss-config-webpack-plugin');","symbol":"default","correct":"const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');"},{"note":"No nested constructor.","wrong":"new ScssConfigWebpackPlugin.Plugin()","symbol":"new","correct":"new ScssConfigWebpackPlugin()"}],"quickstart":{"code":"const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ScssConfigWebpackPlugin()\n  ]\n};","lang":"javascript","description":"Minimal usage: add the plugin to webpack config. Requires webpack >=4.36.0 and Node >=10."},"warnings":[{"fix":"Install mini-css-extract-plugin and ensure it's added to both plugins and loaders.","message":"The plugin assumes mini-css-extract-plugin is installed and configured. If not, CSS extraction may fail silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid mixing with other SCSS/CSS loaders. Remove any existing sass-loader, css-loader, style-loader configuration.","message":"The plugin overrides the `style` loader; if you have custom CSS loaders before it, they may be ignored or conflict.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update to sass-loader >=11 and manually patch the plugin options if needed, or lock sass-loader to v10.","message":"The plugin uses `sass-loader` options that may not be compatible with sass-loader v11+. Specifically, `prependData` was renamed to `additionalData`.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Upgrade Node and npm to meet minimum requirements.","message":"The plugin assumes Node >=10 and npm >=6; older versions will cause cryptic errors during installation.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Review changelog and update any internal references to plugin internals.","message":"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.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install scss-config-webpack-plugin --save-dev` (or yarn/dedupe).","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'scss-config-webpack-plugin'"},{"fix":"Use `const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');`.","cause":"Importing with ES6 import syntax instead of require.","error":"TypeError: ScssConfigWebpackPlugin is not a constructor"},{"fix":"Ensure the package name is spelled correctly in the require statement.","cause":"Typo in plugin name or path when using relative require.","error":"Module not found: Error: Cannot resolve 'file' or 'directory' ./scss-config-webpack-plugin"},{"fix":"Check the plugin documentation for valid options. Common mistake: passing a string instead of an object.","cause":"Passing invalid options to the plugin constructor.","error":"ValidationError: Invalid options object. SCSS Config Webpack Plugin has been initialized using an options object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}