Как я могу использовать общий базовый путь для импорта с общей установкой c меньше? - PullRequest
0 голосов
/ 01 мая 2020

Я использую веб-стек машинописи + реакции и меньше вместе с веб-пакетом.

Мой набор правил веб-пакета для меньшего количества файлов выглядит следующим образом:

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;
}

Это также отлично работает, однако есть ли возможность установить общий базовый путь для меньшего количества импорта? Чтобы мне не пришлось делать этого родственника ../../ et c.? Я читал, что веб-пакет позволяет вам комбинировать переменные, например, @basepath = "mybasepath/folder" в нечто вроде @import "{basePath}/folder2, но как я могу сделать так, чтобы @basepath делился тогда?

1 Ответ

1 голос
/ 01 мая 2020

Вы можете использовать resol.modules , Примерно так:

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

Таким образом, веб-пакет попытается разрешить ваш модуль .less по этому пути root.

...