如何在 Webpack 上避免重复 sass 导入(使用@use)
How to avoid duplicate sass imports(using @use) on Webpack
我的 sass 模块可以像下面这样相互导入。
// LinearLayout.scss
@mixin LinearLayout { ... }
linear-layout { @include LinearLayout; }
// ScrollView.scss
@use "LinearLayout" as *;
@mixin ScrollView {
@include LinearLayout;
...
}
scroll-view { @include ScrollView; }
并且因为 each sass 模块通过在脚本中导入而最终出现在捆绑的 css 文件中,捆绑的 css 文件包含重复 css 个选择器。
如何删除重复项?
- Webpack 5: css-minimizer-webpack-plugin
- 5 岁以下的 Webpack:optimize-css-assets-webpack-plugin
两个 Webpack 版本下的共同需求
我还没有深入了解这个,但似乎这两个插件都在特定的 webpack 捆绑生命周期中工作,该生命周期由 mini-css-extract-plugin
制定。所以你不能使用 style-loader, and the thing that was done by it can be done by 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;
我的 sass 模块可以像下面这样相互导入。
// LinearLayout.scss
@mixin LinearLayout { ... }
linear-layout { @include LinearLayout; }
// ScrollView.scss
@use "LinearLayout" as *;
@mixin ScrollView {
@include LinearLayout;
...
}
scroll-view { @include ScrollView; }
并且因为 each sass 模块通过在脚本中导入而最终出现在捆绑的 css 文件中,捆绑的 css 文件包含重复 css 个选择器。
如何删除重复项?
- Webpack 5: css-minimizer-webpack-plugin
- 5 岁以下的 Webpack:optimize-css-assets-webpack-plugin
两个 Webpack 版本下的共同需求
我还没有深入了解这个,但似乎这两个插件都在特定的 webpack 捆绑生命周期中工作,该生命周期由 mini-css-extract-plugin
制定。所以你不能使用 style-loader, and the thing that was done by it can be done by 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;