scss-config-webpack-plugin
Creating a webpack loader configurations can be quite time consuming.
The scss-config-webpack-plugin
is part of the common-config-webpack-plugin
suite which tries to provide best practices for the most common loader requirements.
If no mode is explicitly set for the plugin the configuration will adjust depending on your webpack mode setting.
The injected configurations are based on create-react-app css part
webpack.config.js
webpack.config.js
Installation
npm i --save-dev scss-config-webpack-plugin
Webpack Config
In most projects you will need to set up project specific options but you can still use all or some common-config-webpack-plugin parts.
const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
module.exports = {
plugins: [new ScssConfigWebpackPlugin()],
};
Output filename
Webpack allows to configure the output file name for javascript
files with output.filename
.
By default the ScssConfigWebpackPlugin will reuse this option but will replace .js to .css and /js/ to /css/.
const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
module.exports = {
output: {
filename: 'js/app.js',
},
plugins: [
new ScssConfigWebpackPlugin(), // Generates a new file called css/app.css
],
};
If this behaviour doesn't fit your needs you can set a different name using the filename
option:
const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
module.exports = {
plugins: [
new ScssConfigWebpackPlugin({
filename: 'css/main.min.css',
}),
],
};
css modules
Just as create-react-app the scss-config-webpack-plugin supports CSS Modules with the extension .module.css
or .module.scss
.