时间戳

首页 > 解决方案 > 如何使用通用的基本路径从通用的少 webpack 设置导入？

webpack - 如何使用通用的基本路径从通用的少 webpack 设置导入？

问题描述

我正在使用一个 typescript+react 的 web 堆栈，而 less 与 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共享呢？

标签： webpacklessless-loader

解决方案

您可以使用resolve.modules，像这样：

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

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

推荐阅读