Webpack: creating multiple css files from the same sources

Question

I am trying to create 2 different CSS files from the same SCSS sources using webpack 2 to have alternative stylesheets without code duplication. I successfully created both sheets separately, commenting on one, but I cannot figure out how to generate them at the same time. My webpack configuration (shortened for relevance):

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
    ]
};

If I try to start webpack in this configuration, I get errors saying

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

This makes it look like it is running both sets of rules at the same time, instead of running the same one.

Is there any way to do this?

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 , .