Ошибка при импорте углового материала 6 пользовательской темы в styles.css

Question

Я создал собственную тему, используя Angular Material 6. Когда я импортирую тему в styles.css, я получаю сообщение об ошибке:

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) Сборка модуля завершилась неудачно: ошибка: не удается разрешить '@angular/ материал / тематика 'в'C:\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src'

Вот мой код для my-theme.scss:

@import "~@angular/material/theming";

@include mat-core();

$my-theme-primary: mat-palette($mat-custom-blue, 400);
$my-theme-accent: mat-palette($mat-custom-blue, A100, A100, A400);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent);

$primary-color: map_get($my-theme-primary, 400);
$secondary-color: map_get($my-theme-accent, 500);

@include angular-material-theme($my-theme);

Вот код для styles.css:

/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
@import url("./my-theme.scss");

Это скриншот angular.json: angular.json

Answer 1

Вы не должны добавлять свои theme.scss файл внутри файла CSS.

Следуй этим шагам:

1. (Необязательно) Удалить тему по умолчанию в файле src/styles.css:

   @import '~@angular/material/prebuilt-themes/the-default-theme.css';
   

2. Создать файл theme.scss внутри src папка.

3. Открыть файл angular.json (или же angular-cli.json) внутри вашей корневой папки

4. Добавьте свою тему "src/theme.scss" в styles массив:

   "projects": {
     "your-app": {
       ...
       "architect": {
         "build": {
           ...
           "options": {
             ...
             "styles": [
               "src/styles.css",
               "src/theme.scss"
             ],
           },
         },
       },
     },
   }
   

5. Перезапустите приложение.

Дополнительные ссылки:

• Тематическое руководство от material.angular.io

Answer 2

Я смог решить эту проблему, удалив мои текущие nodejs и установив последнюю версию 8.11.3, и все работало нормально. Мне больше не нужно было импортировать в styles.css, как стало известно по ссылке @Und3rTow. Кроме того, я больше не использовал ввод в angular.json @pardeep-jain. Спасибо, парни