Не удалось импортировать сторонние материалы sass / scss в проект Angular 6 - PullRequest
Новая
       14

Не удалось импортировать сторонние материалы sass / scss в проект Angular 6

0 голосов
/ 30 мая 2018

Могу ли я использовать компоненты материала в Angular?Если да, то как правильно это сделать?

Я использую руководство по этой ссылке

Я использовал: npm install @ material/image-list

Затем я импортирую в свой style.scss: @import "@material/image-list/mdc-image-list";

И при компиляции я получаю следующую ошибку:

ОШИБКА в ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) Сборка модуля завершилась неудачно: @import "@ material / image-list / mdc-image-list";^ Файл для импорта не найден или не читается: @ material / image-list / mdc-image-list.в /Users/pacozevallos/cuscoAvisos/avisos/src/styles.scss (строка 66, столбец 1)

Затем, когда я проверяю mdc-image-list.scss, я нахожу это: enter image description here

1 Ответ

0 голосов
/ 30 мая 2018

Вы должны настроить Angular CLI, чтобы исправить эту проблему.

По умолчанию он ищет ./.

@import "@material/image-list/mdc-image-list" === импорт из ./@material/image-list/mdc-image-list

Но это сторонний модуль, который хранится в node_modules.

Открыть angular.json файл и изменитьstylePreprocessorOptions.includePaths Propery. 

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

Пример конфигурации: 

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

Существует альтернативное решение.Вы можете использовать знак ~, чтобы сообщить Angular CLI, который выбрал это значение из node_module.

Например @import "~@material/image-list/mdc-image-list"

Но это не будет работать для этой настройки, так как у этого scss также есть зависимость, которую нужно искать из node_module.

Ссылка: Angular Wiki

...