Я использую веб-стек машинописи + реакции и меньше вместе с веб-пакетом.
Мой набор правил веб-пакета для меньшего количества файлов выглядит следующим образом:
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
делился тогда?