gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 01:10:23 26 4
gpt4 key购买 nike

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

如何删除重复项?

最佳答案

两个 Webpack 版本下的共同要求

我还没有对此进行深入研究,但似乎这两个插件都在由 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;

关于typescript - 如何在 Webpack 上避免重复的 sass 导入(使用 @use),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64118925/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com