如何避免在Webpack上重复导入sass(使用@use)

Question

我的sass模块可以像下面这样相互导入。

// LinearLayout.scss
@mixin LinearLayout { ... }
linear-layout { @include LinearLayout; }
// ScrollView.scss
@use "LinearLayout" as *;
@mixin ScrollView {
@include LinearLayout;
...
}
scroll-view { @include ScrollView; }

由于每个sass模块最终都会在脚本中导入到捆绑的css文件中，因此捆绑的css文档包含重复的css选择器。

如何删除重复项？

Answer 1

• Webpack5:css minimizer Webpack插件
• Webpack低于5：优化css资产Webpack插件

两个Webpack版本下的共同要求

• 迷你css提取插件

我还没有深入研究过这一点，但这两个插件似乎都在mini-css-extract-plugin创建的特定webpack绑定生命周期中工作。所以你不能使用样式加载器，它所做的事情可以通过html webpack插件来完成。

以下是您的webpack.config.ts应该是什么样子。请注意，您将optimization.minimize设置为true，以使它也在开发中运行。

import type Webpack from "webpack";
import HtmlBundler from "html-webpack-plugin";
import CssExtractor from "mini-css-extract-plugin";
// webpack@5
import CssMinimizer from "css-minimizer-webpack-plugin";
// under webpack@5
import CssMinimizer from "optimize-css-assets-webpack-plugin";
const config: Webpack.Configuration = {
...
plugins: [
new HtmlBundler({
template: "yourHtmlTemplate.html"
});
new CssExtractor({
filename: "outputCssFilename.css",
}),
],
module: {
rules: [
{
test: /.s[ac]ss$/,
use: [
CssExtractor.loader,
"css-loader",
"resolve-url-loader",
"sass-loader",
]
},
],
},
optimization: {
minimize: true, // set true to run minimizers also in development
minimizer: [
new CssMinimizer(),
],
},
};
export default config;