Description
I'm compiling multiple SCSS to .CSS using file-loader. I also want to minify the CSS compiled from the .SCSS. optimize-css-assets-webpack-plugin does not have option to specify output path of the CSS file(s) to compile. It's default to output file bundle.js which is useful in my case.
Here is my Webpack Config:
const webpack = require('webpack');
const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const config = {
entry: [
'./scss/bootstrap.scss',
'./scss/main.scss',
'./scss/example-1.scss',
'./scss/example-2.scss',
'./scss/example-3.scss',
'./scss/example-3.scss',
],
output: {
path: path.resolve(__dirname, 'css'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /.scss$/,
use: [{
loader: 'file-loader',
options: {
sourceMap: true,
name: '[name].css'
}
},
{
loader: "sass-loader",
options: {
name: '[name].scss',
sourceMap: true
}
}
]
}]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /.optimize.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
filepath:['bootstrap.css','...css','...css'] (Need to have this feature to minify css)
canPrint: true
})
],
mode: 'production',
devtool: devMode ? 'eval-source-map' : 'source-map',
}
module.exports = config;