如何使用通用的无webpack设置使用通用的基本路径进行导入

Question

我正在使用一个typescript+react和更少的web堆栈以及webpack。

我的较少文件的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模块。