Импорт внешнего меньшего файла в файл app.component.less с помощью Webpack

Угловое приложение 2

У меня есть файл less в assets/less/color.less, который содержит некоторые переменные.

@submenu :  #003C4F;
@sidebar :  #00495D;
@hover :    #006673;

Мне нужно иметь доступ к этим переменным в файле less моего компонента, расположенном по адресу app/app.component.less. Я использую «webpack» для управления своими файлами.

Как импортировать внешний файл .less в файл .less компонента с помощью «веб-пакета»? Простой импорт не работает, как показано ниже.

//app.component.less

@import "assets/less/prm-color.less";

.grid-side {
  height: 100%;
  width: 45px;
  background-color: @sidebar;
}

Все компилируется нормально, я просто получаю ошибку для этой переменной в инспекторе.

Недопустимое значение свойства

Вот мои менее загрузчики:

module: {
 loaders: [
  {
    test: /\.less$/,
    loader: 'raw',
  },
 ]
},

person ed-tester    schedule 01.12.2016    source источник
comment
Игнорировать инспектора, он компилируется? Настроили ли вы менее загрузчик и т.д.   -  person John Mee    schedule 02.12.2016
comment
@JohnMee: Спасибо за ответ. Я внес изменения в вопрос выше и добавил информацию о меньшем загрузчике.   -  person ed-tester    schedule 02.12.2016
comment
Опубликуйте ошибку.   -  person John Mee    schedule 05.12.2016
comment
@JohnMee Повторно добавил ошибку   -  person ed-tester    schedule 05.12.2016


Ответы (2)


Я пытался сделать то же самое, когда нашел ваш вопрос. Проблема для меня заключалась в том, что мне пришлось использовать относительный путь вместо абсолютного.

Поэтому для меня мне пришлось импортировать следующее:

@import "../assets/less/prm-color.less";
person Community    schedule 28.12.2016

Проблема в загрузчике. Было установлено значение raw, его следует изменить на следующее:

module: {
 loaders: [
  {
    test: /\.less$/,
    loader: ["css-loader", "less-loader"],
  },
 ]
},
person ed-tester    schedule 23.01.2017