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

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仓库上做了一个例子： https : //github.com/wishtack/wt-webpack-ab-testing-example

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

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

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

希望能帮助到你。

Answer 2

尝试使用包含。

    {
        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'])]
    },