2

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?

Graeme Paul
  • 1,143
  • 1
  • 16
  • 30

1 Answers1

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

José Quinto Zamora
  • 2,070
  • 12
  • 15
  • 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 – Graeme Paul May 07 '17 at 14:44
  • 1
    Make sure you have all your scss files imported from lib under app/stylesheets folder – José Quinto Zamora May 07 '17 at 14:59
  • Just a note that extract-text-webpack-plugin has been deprecated and it is recommended to switch to https://github.com/webpack-contrib/mini-css-extract-plugin – C-Dev Jun 07 '22 at 18:13