如何在不重复的情况下使用 WebPack 减少捆绑

Question

我有这样的结构： Page1.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”。

我如何设置第 3 个包：colors.css，也许不仅是颜色。我们称它为“core.css”，我将在其中设置一些样式。

谢谢。

Answer 1

这是解决某些任务的错误方法。正确的方法是：拥有仅包含变量和函数的文件： theme.less

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

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

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

如何在不重复的情况下使用 WebPack 减少捆绑

How to bundle less with WebPack without duplicates

css

less

webpack