Webpack:从相同来源生成多个css文件 [英] Webpack: Generate multiple css files from the same sources

问题描述

我正在尝试使用webpack 2从相同的SCSS源生成2个不同的CSS文件，以便在不复制代码的情况下具有备用样式表.我已经通过注释掉一个表单成功地生成了两个表，但是无法弄清楚如何同时生成它们.我的webpack配置(相关性简称)为:

I'm trying to generate 2 different CSS files from the same SCSS sources with webpack 2, in order to have alternate stylesheets without duplicating code. I've successfully generated both sheets separately by commenting one out, but can't figure out how to generate them at the same time. My webpack config (shortened for relevance) is:

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，我会收到错误消息

If I try to run webpack on this config, 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

这使得它看起来像同时运行两组规则，而不是先运行另一组规则.

Which makes it look like it's running both sets of rules at the same time, rather than running one then the other.

有什么办法吗?

推荐答案

我做了进一步的研究，看来没有直接的方法可以做到这一点(我发现

I did further research and it appears there's no direct way to do this (I found https://survivejs.com/webpack/foreword/ to be a great resource). However I did find a work-around. I used 'composing-configuration' to create my module rules in a way that prevented duplication, then exported both configurations so webpack builds them simultaneously. A simplified example is:

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个构建，但是它允许我生成两个样式表而无需代码重复

This isn't a perfect solution since it involves 2 builds, but it lets me generate both stylesheets without code duplication

这篇关于Webpack:从相同来源生成多个css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！