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

Posted

技术标签:

【中文标题】如何在 Webpack 上避免重复的 sass 导入(使用 @use)【英文标题】:How to avoid duplicate sass imports(using @use) on Webpack 【发布时间】:2021-01-15 00:35:25 【问题描述】:

我的 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 选择器。

如何删除重复项?

【问题讨论】:

【参考方案1】: Webpack 5:css-minimizer-webpack-plugin 5以下的Webpack:optimize-css-assets-webpack-plugin

两个 Webpack 版本下的共同要求

mini-css-extract-plugin

我还没有对此进行深入研究,但似乎这两个插件都在 mini-css-extract-plugin 制作的特定 webpack 捆绑生命周期中工作。所以你不能用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;

【讨论】:

以上是关于如何在 Webpack 上避免重复的 sass 导入(使用 @use)的主要内容,如果未能解决你的问题,请参考以下文章

Webpack ExtractTextPlugin - 避免输出 css 中的重复类

Webpack SASS 加载器无法对常见的 SCSS 导入进行重复数据删除

如何使用 sass 正确避免在 HTML 上嵌入 twitter 引导类名称

如何在 Vuejs+Webpack 中包含外部 sass 目录?

webpack 配置scssless全局样式(自定义的,vue-cli2/3)

Sass - 为从文件导入的所有类添加前缀(使用 sass 导入或 webpack 加载器)