如何避免在 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

• Webpack 5：css-minimizer-webpack-plugin
• 5 下的 webpack: optimize-css-assets-webpack-plugin

两个 Webpack 版本下的共同需求

• mini-css-extract-plugin

我还没有深入研究这个问题，但似乎这两个插件都在由mini-css-extract-plugin. 所以你不能使用style-loader，它所做的事情可以通过html-webpack-plugin来完成。

下面是你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;