Невозможно импортировать файл .less из node_modules, используя имя модуля в угловом проекте

Question

Я пытаюсь импортировать стили из пользовательской библиотеки, упакованной в виде узла-модуля. Предположим, имя пакета @custom. Я намерен импортировать меньший файл изнутри пакета @custom следующим образом:

@import '@custom/styles/common.less'

Эта запись ищет '@custom/styles/common.less' в той же папке, где я добавил этот оператор импорта.

ERROR in ./src/app/app.component.less
Module build failed:

@import "@custom/styles/common";
^
Can't resolve './@custom/styles/common.less' in '<path>\src\app'
      in <path>\src\app\app.component.less (line 1, column 0)

Есть ли способ объявить relative-path или module-name так, чтобы он выполнял поиск в папке node-modules? Или я упускаю что-то очень простое?

Answer 1

Есть два способа сделать это, если вам нужно просто скомпилировать их вместе с вашим проектом, а затем включить его в свой angular-cli, как показано ниже:

"styles": [
    "../node_modules/custom/styles/common.less"

, если вы хотите использовать менеефайлы в вашем проекте и используйте их переменные, тогда вы должны включить его в свой файл angular-cli, как показано ниже:

 "stylePreprocessorOptions": {
    "includePaths": [
      "../node_modules/custom/styles"
    ]
  },

, а в файлы стилей компонентов вы можете включить меньше файлов, таких как @import '../styles/<your parent less file>';