webpack extract-text-plugin output multiple css files

Question

I'm trying to get my webpack build to export 2 css files, one for all the lib files, and one for my files. I am requiring both files separately into my main.js. Atm it is merging all css requires into 1 file.

Only way I have been able to generate files is by splitting the entry:

entry: {
    lib:'./style/lib.scss',
    app: [
      './src/index.js',
      './style/style.scss',
    ],
  },

But the lib.scss generated is a duplicate of style, and this method also creates a redudant lib.js. Is there any way to create 2 separate css files, or to set any css that is required needs to be exported individually and not merged into single file?

José Quinto Zamora · Accepted Answer · 2017-05-02 10:54:56Z

3

You split your CSS lib from style by using different Pluggin instances:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractStyle = new ExtractTextPlugin('style.css');
const extractLib = new ExtractTextPlugin('lib.css');

And different folders for the scss as well:

           {
                test: /\.scss$/i,
                include: resolve(__dirname, './../app/stylesheets'),
                loader: extractLib.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            },
            {
                test: /\.scss$/i,
                include: resolve(__dirname, './../app/src'),
                use: extractStyle.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            }

You can see the full example here: https://github.com/jquintozamora/webpack-multiple-css-output/blob/master/webpack/webpack.config.js

answered May 2, 2017 at 10:54

José Quinto Zamora

2,13815 silver badges15 bronze badges

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

3 Comments

Graeme Paul Over a year ago

unfortunately it doesnt work for me, i get this error Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import BEM.scss

José Quinto Zamora Over a year ago

Make sure you have all your scss files imported from lib under app/stylesheets folder

C-Dev Over a year ago

Just a note that extract-text-webpack-plugin has been deprecated and it is recommended to switch to github.com/webpack-contrib/mini-css-extract-plugin

Collectives™ on Stack Overflow

webpack extract-text-plugin output multiple css files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related