带有 Webpack 的白标 sass/css

Question

我正在尝试使用 webpack 为白标应用程序生成多个 css 文件。

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

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

Answer 1

我最近一直在研究这个确切的问题。我发现 i18n example config 可以说明如何做到这一点。基本上 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 交互的，但我希望我能解决一些问题。

带有 Webpack 的白标 sass/css

White label sass/css with Webpack

css

sass

white-labelling

webpack