多次处理WebPack中的SASS文件(多个配置)

Question

i使用带有变量的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输出两个文件？

我目前正在使用webpack1。

Answer 1

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

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

IMHO，第一个是最干净的，因为它将构建两个具有不同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'])]
    },