Webpack: Generate multiple css files from the same sources

跟風遠走 提交于 2019-12-04 09:05:38

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!