Output 2 (or more) .css files with mini-css-extract-plugin in webpack

Question

When using webpack 2(or 3), I could write code like:

const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');

rules: [
{
   test: /\.scss$|\.css$/,
   include: path.resolve(__dirname, './styles/App.scss'),
   use: coreStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
},
{
   test: /\.scss$|\.css$/,
   exclude: path.resolve(__dirname, './styles/App.scss'),
   use: componentStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
}
]

And as a result, I got 2 css files in output.

How can I reach the same with mini-css-extract-plugin? As according to the docs I can specify only one file name:

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
    })
]

Thanks.

Germán Faller · Accepted Answer · 2021-01-21 03:13:33Z

23

This Example also complies the SCSS and doesn't use MiniCssExtractPlugin

In Webpack 4.16.5 I have managed to get this to work by first installing these 2 packages

npm install --save-dev file-loader
npm install --save-dev extract-loader

Then in your webpack.config.js

//const MiniCssExtractPlugin = require("mini-css-extract-plugin");

var path = require("path");

module.exports = {
    entry: ['./blocks.js', './block.editor.scss', './block.style.scss'],
    mode: 'production',//change to 'development' for non minified js
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'blocks.build.js',
        publicPath: "/dist"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].build.css',
                            context: './',
                            outputPath: '/',
                            publicPath: '/dist'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
        ],
    },
};

This will output the following structure

To minifi the CSS install

npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

add to webpack.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

var path = require("path");

module.exports = {
    //...
    watch: true,
    module: {
        rules: [
            //...
        ],
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
};

Hope this helps

edited Jan 21, 2021 at 3:13

Germán Faller

5837 silver badges16 bronze badges

answered Aug 15, 2018 at 11:53

DesignMonkeyJim

1,9451 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2580401 Over a year ago

amazing this works well for me, I spent hours till I finally found this

iturgeon Over a year ago

Agree, it seems like a common use case (though possibly not an intended one) to use scss entry points and expect a css file out (without any chaff). Thanks for posting the answer. I'm migrating from an older setup here and this helped a lot.

Jacobo Over a year ago

This works but it mess the fonts. What can I do to load the GoogleFont?

Jacobo Over a year ago

This broke the fonts in my project. Any ideas? The fonts are in the css from google apil

Himanshu Mishra Over a year ago

I tried this setup and it works perfectly fine except that I am unable to create link tags on html generations for every chunk. Is there any solution for that?

|

Collectives™ on Stack Overflow

Output 2 (or more) .css files with mini-css-extract-plugin in webpack

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related