Webpack:从相同的源生成多个css文件

Webpack:从相同的源生成多个css文件,webpack,webpack-2,sass-loader,Webpack,Webpack 2,Sass Loader,我正在尝试使用Webpack2从相同的SCSS源生成两个不同的CSS文件,以便在不复制代码的情况下拥有备用样式表。我已经通过注释一个成功地分别生成了这两张表,但是我不知道如何同时生成它们。我的网页配置(因相关性而缩短)为: 如果我尝试在这个配置上运行webpack,我会得到以下错误 ERROR in ./~/css-loader!./~/sass-loader?{"data":"$light: true;"}!./~/extract-text-webpack-plugin/loader.js?{

我正在尝试使用Webpack2从相同的SCSS源生成两个不同的CSS文件,以便在不复制代码的情况下拥有备用样式表。我已经通过注释一个成功地分别生成了这两张表,但是我不知道如何同时生成它们。我的网页配置(因相关性而缩短)为:

如果我尝试在这个配置上运行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
这使得它看起来像是同时运行两套规则,而不是一套接着一套


有什么方法可以做到这一点吗?

我做了进一步的研究,但似乎没有直接的方法可以做到这一点(我发现这是一个很好的资源)。但我确实找到了一份工作。我使用“组合配置”以防止重复的方式创建模块规则,然后导出两种配置,以便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,
]

这不是一个完美的解决方案,因为它涉及两个版本,但它允许我生成两个样式表,而无需代码重复

您成功地处理了这个问题吗?
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,
]