css - 带有 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 交互的，但我希望我能解决一些问题。