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

Posted 2023-02-22

【中文标题】Webpack：从相同的源生成多个 css 文件

【英文标题】：Webpack: Generate multiple css files from the same sources

【发布时间】：2017-07-01 23:52:26

【问题描述】：

我正在尝试使用 webpack 2 从相同的 SCSS 源生成 2 个不同的 CSS 文件，以便在不重复代码的情况下拥有备用样式表。我已经通过注释一张表成功地分别生成了两张表，但无法弄清楚如何同时生成它们。我的 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

这使它看起来像是同时运行两组规则，而不是运行一个然后另一个。

有什么办法吗？

【问题讨论】：

你成功处理了这个问题吗？

【参考方案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 个构建，但它可以让我生成两个样式表而无需重复代码