我如何使用通用的基本路径从通用的 less webpack 设置中导入？

Question

我正在使用 typescript+react 和 less 以及 webpack 的网络堆栈。

我的 less 文件的 webpack 规则集如下所示：

rules: [
{
    test: /\.less/,
    use: [
        "style-loader",
        "css-loader",
        "less-loader",
    ],
},

我现在确实有点难以弄清楚如何做一些适当的少导入。

我创建了一个包含一些通用定义的文件，名为 "Colors.less"。它位于 React/Common/Styles/Colors.less.

目前内容：

@navy: #001f3f;

现在，我想从位于此处的另一个文件导入此文件：React/Modules/Chat/Styles/ChatWidgetTopBar.less。

这是我试过的：

@import (reference) "../../../../Common/Styles/Colors.less";

.ChatWidgetTopBar {
    height: 25px;
    width: 100%;

    background-color: @navy;

    cursor: pointer;
}

这也很好用，但是，是否也可以为更少的导入设置一个通用的基本路径？这样我就不必做这个亲戚../../等？我读到 webpack 允许您组合变量，例如@basepath = "mybasepath/folder" 变成类似 @import "{basePath}/folder2 的东西，但我怎样才能让 @basepath 共享呢？

Answer 1

您可以利用 resolve.modules, 像这样：

module.exports = {
    resolve: {
        modules: ['<youbasepath>']
    },
    ...
}

这样 webpack 将尝试从该路径根目录解析您的 .less 模块。

我如何使用通用的基本路径从通用的 less webpack 设置中导入？

How can I use a common base path to import from with a generic less webpack setup?

webpack

less

less-loader