我正在尝试使用 webpack 为白标应用程序生成多个 css 文件。
我想为每个“品牌”运行一次 webpack css/sass 加载器,并将其输出到一个单独的文件中。我想这样做,因为我为每个品牌都有一个单独的变量文件,并且希望 sass 为每个品牌编译一个 css 文件。
我想我可以用 grunt/gulp 做到这一点,但我想避免将它们包含在这个项目中。
我正在尝试使用 webpack 为白标应用程序生成多个 css 文件。
我想为每个“品牌”运行一次 webpack css/sass 加载器,并将其输出到一个单独的文件中。我想这样做,因为我为每个品牌都有一个单独的变量文件,并且希望 sass 为每个品牌编译一个 css 文件。
我想我可以用 grunt/gulp 做到这一点,但我想避免将它们包含在这个项目中。
我最近一直在研究这个确切的问题。我发现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 交互的,但我希望我能解决一些问题。