Question

我使用的SASS文件包含根据目标网站更改值的变量。

为了解决这个问题，我想我可以要求webpack生成两个外部CSS文件，每个目标网站一个。

我尝试过以下配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var extract1 = new ExtractTextPlugin('assets/styles.1.css'));
var extract2 = new ExtractTextPlugin('assets/styles.2.css'));

module.exports = {
    /* snip - pretty standard configuration with single entry point */
    module: {
        loaders: [
            /* ... snip ... */
            /* Support for SASS. */
            {
                test: /\.scss$/,
                loaders: [extract1.extract(['css-loader','sass-loader?config=sassLoaderConfig1'])]
            },             
            {
                test: /\.scss$/,
                loaders: [extract2.extract(['css-loader','sass-loader?config=sassLoaderConfig2'])]
            },             
        ]
    },

    sassLoaderConfig1: {
        data: "@import 'variables1.scss';\n"
    },
    sassLoaderConfig2: {
        data: "@import 'variables2.scss';\n"
    },

    plugins: [extract1,extract2],

    /* snip */
}

但是，只生成styles.1.css - 我想单个文件只能由一个加载器获取。如何让webpack输出具有不同变量的两个文件？

我目前正在使用Webpack 1。

Answer 1

我在github repo上做了一个例子：https://github.com/wishtack/wt-webpack-a-b-testing-example

有两个分支parallel-webpack和hack-sass-a-b-testing。

恕我直言，第一个是最干净的，因为它将构建两个具有不同common.scss文件的应用程序。

第二个将运行一个构建并输出两个样式文件。它更加优化，因为您可以在两个输出之间共享webpack块。问题是它将使用通配符加载所有SASS文件并将它们放在CSS文件中。这种方法存在两个问题： - 你将加载所有SASS文件，甚至无用的。 - 它不适用于Angular 2+，因为框架将覆盖每个组件的CSS或使用shadow DOM。使用这种方法，CSS是全局的，而且很脏。

希望它有所帮助。

Answer 2

尝试使用include。

    {
        test: /\.scss$/,
        include: "assets/styles.1.css"
        loaders: [extract1.extract(['css-loader','sass-loader?config=sassLoaderConfig1'])]
    },             
    {
        test: /\.scss$/,
        include: "assets/styles.2.css"
        loaders: [extract2.extract(['css-loader','sass-loader?config=sassLoaderConfig2'])]
    },

多次处理webpack中的sass文件（多个配置）

2 个答案: