如何在没有重复的情况下减少与 WebPack 的捆绑

编程问答 2022-05-21

问题描述

我有这样的结构： 第1.less @import "colors.less";

Page2.less @import "colors.less"

webpack 配置：

{
    test: /\.less$/i,use: [MiniCssExtractPlugin.loader,{
         loader: "css-loader",options: { url: false },},{
         loader: "less-loader",options: {
            lessOptions: { strictMath: true },}],

因此我有 2 个文件：1.css -> 与 page1 包相关，2.css -> page2。 并且对这两个文件都注入了“color.less”。

我怎样才能设置第三个包：colors.css，也许不仅仅是颜色。我们称它为“core.css”，我将在其中添加一些样式。

谢谢。

解决方法

这是解决某种任务的错误方法。 正确的方法是： 有只有变量和函数的文件： 无主题

具有核心样式的文件：core.less（button.less、input.less 等）。 该文件可以@import theme.less

任何组件都不应导入 core.less，只应导入 theme.less。

然后我们应该使用 JS 文件和 webpack 基本捆绑方法来管理它： Button.js 应该导入“button.less” 当我们在某处使用“Button”时，它也会添加依赖项和 button.less。 它避免了我们在不同的编译文件中有重复的样式。

lesswebpackwebpackwebpack