Webpack如何避免重复sass导入(使用@use)
Webpack如何避免重复sass导入(使用@use)
提问于 2020-09-29 11:44:22
我的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选择器。
我怎样才能移除复制件？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-29 14:07:38
- Webpack 5：css-最小化器-webpack-插件
- Webpack五岁以下：优化-css-资产-webpack-插件
Webpack两种版本的共同要求
我还没有对此进行深入研究，但这两个插件似乎都是在mini-css-extract-plugin开发的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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64118925
复制相关文章
相似问题
腾讯云开发者
