带有Webpack的白色标签sass / css

Question

我正在尝试使用webpack为带有白色标签的应用程序生成多个CSS文件。

我想为每个“品牌”运行webpack css / sass加载程序一次，并将其输出到单独的文件中。 我要这样做，因为每个品牌都有一个单独的变量文件，并且希望sass为每个品牌编译一个css文件。

我想可以用grunt / gulp做到这一点，但我想避免将它们包括在此项目中。

Answer 1

我最近一直在研究这个确切的问题。 我发现i18n示例配置说明了如何做到这一点。 基本上，webpack配置可以是一个数组。 你可以做这样的事情。

import webpack from 'webpack';


export default [
  {
    entry: {
      'brand-1': ['path/to/vars-1.scss', 'path/to/my.scss'],
    }
    // ...
  },
  {
    entry: {
      'brand-2': ['path/to/vars-2.scss', 'path/to/my.scss'],
    }
    // ...
  },
];

显然，您可以生成列表，但是为了清楚起见，我将其写出。 我们的SCSS变量是动态的，因此我编写了一个脚本，该脚本创建webpack配置，然后使用sassLoader.data选项注入变量。

您可能还需要使用webpack-merge来分隔配置。

const common = {
  module: {
    loaders: {
      // ...
    },
  },
};

export default BRANDS.map((brand) => (
  merge(
    common,
    {
      entry: {
        [brand.name]: [brand.variableFile, 'path/to/my.scss'],
      },
      // If you needed something like this.
      plugins: [
        webpack.DefinePlugin({
          BRAND_NAME: brand.name,
        }),
      ],
    },
  )
));

我正在使用ExtractTextPlugin，并且为每个品牌实例化一个。 我不确定这是否正确。

我也没有弄清楚它如何与CommonChunksPlugin交互，但是我希望我能解决一些问题。