我怎样才能使用一个通用的基础路径来导入一个通用的less webpack设置？

Question

我正在使用typecript+react和less与webpack一起的web栈。

我的webpack规则集对less文件的要求如下。

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

我现在确实有一点困难，不知道如何正确地导入less文件。

我创建了一个包含一些常用定义的文件，叫做 "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

你可以使用 "style-loader"... resolve.modules,类似这样。

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

这样webpack就会尝试从根目录下解析你的.less模块.