如何在 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 目录?