webpack extract-text-plugin выводит несколько CSS-файлов

Question

Я пытаюсь заставить мою сборку веб-пакета экспортировать 2 файла CSS, один для всех файлов lib и один для моих файлов. Я требую оба файла отдельно в мой main.js. Atm объединяет все css требования в 1 файл.

Единственный способ, которым я смог генерировать файлы, это разделить запись:

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

Но сгенерированный lib.scss является дубликатом стиля, и этот метод также создает избыточный lib.js. Есть ли способ создать 2 отдельных файла CSS или установить любой необходимый файл CSS, который необходимо экспортировать по отдельности, а не объединять в один файл?

Answer 1

Вы отделяете свою CSS-библиотеку от стиля, используя разные экземпляры плагина:

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

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

И разные папки для scss:

           {
                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'
                        }
                    ]
                })
            }

Вы можете увидеть полный пример здесь: https://github.com/jquintozamora/webpack-multiple-css-output/blob/master/webpack/webpack.config.js