Webpack: генерировать несколько файлов css из тех же источников

Question

Я пытаюсь создать 2 разных файла CSS из тех же источников SCSS с помощью webpack 2, чтобы иметь альтернативные таблицы стилей без дублирующего кода. Я успешно создал оба листа отдельно, комментируя один, но не могу понять, как их генерировать в одно и то же время. Мой WebPack конфигурация (укороченная на актуальность) составляет:

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const webpack = require('webpack'); 
const path = require('path'); 

const ExtractLightCss = new ExtractTextPlugin("app-light.css") 
const ExtractDarkCss = new ExtractTextPlugin("app-dark.css") 

module.exports = { 
    ... 
    module: { 
     rules: [ 
      { 
       test: /\.scss?$/, 
       use: ExtractLightCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: true;"}} ]}) 
      }, 
      { 
       test: /\.scss$/, 
       use: ExtractDarkCss.extract({ fallback: "style-loader", use: ["css-loader", {loader: "sass-loader", options: {data: "$light: false;"}} ]}) 
      }, 
      ... 
     ] 
    },  
    plugins: [ 
     ExtractLightCss, 
     ExtractDarkCss 
    ] 
}; 

Если я пытаюсь запустить WebPack на этой конфигурации, я получаю ошибки говоря

ERROR in ./~/css-loader!./~/sass-loader?{"data":"$light: true;"}!./~/extract-text-webpack-plugin/loader.js?{"id":2,"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader?{"data":"$light: false;"}!./styles/[filename].scss 

что делает его похожим на это работает оба набора правил в в то же время, вместо того, чтобы запускать один, а затем другой.

Есть ли способ сделать это?

Answer 1

Я сделал дальнейшее исследование, и, похоже, нет прямого способа сделать это (я нашел https://survivejs.com/webpack/foreword/, чтобы стать отличным ресурсом). Однако я нашел работу. Я использовал «компоновку-конфигурацию» для создания правил моего модуля таким образом, чтобы предотвратить дублирование, а затем экспортировал обе конфигурации, поэтому webpack создает их одновременно. Упрощенный пример:

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

const deploymentSass = (light) => { 
    return { 
     module: { 
      rules: [ 
       { 
        test: /\.scss?$/, 
        use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", { 
         loader: "sass-loader", 
         options: { 
          data: light ? "$light: true;" : "$light: false;", 
         }} ]}), 
       }, 
      ], 
     }, 
     plugins: [ 
      new ExtractTextPlugin(`app-${light ? 'light' : 'dark'}.css`), 
     ], 
    }; 
}; 

const lightTheme = merge(qaConfig,      
        deploymentSass(true)); 

const darkTheme = merge(qaConfig, 
        deploymentSass(false)); 

module.exports = [ 
    lightTheme, 
    darkTheme, 
] 

Это не является идеальным решением, так как она включает в себя 2 строит, но это позволяет мне создавать как таблицы стилей, без дублирования кода