Угловая материальная тема

Я пытаюсь изменить тему проекта, в котором есть Angular 6 и использует Angular Material 6.3.3

В настоящее время я просто скопировал код с сайта Material и выполнил шаги, но при попытке запустить ng serve появляется ошибка.

**ERROR** in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
Module build failed: Syntax Error

(118:13) Missed semicolon

116 | // We use display: flex on this element exclusively for centering connected overlays.
117 | // When not centering, a top/left/bottom/right will be set which overrides the normal

118 | // flex layout.
| ^
119 | display: flex;
120 |

ℹ ｢wdm｣: Failed to compile.

Мой файл theme.scss выглядит так:

@import '~@angular/material/_theming.scss';

@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-blue, A200, A100, A400);

$candy-app-warn: mat-palette($mat-red);

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);
Источник

2 ответа

Я обнаружил, что решение состоит в том, чтобы полностью переключить ваш проект на SCSS или использовать только CSS. Документация Angular Materials предполагает, что вы используете SCSS, поэтому весь контент должен быть сгенерирован с использованием проекта, который стилизует его в SCSS.

Итак, в заключение, вы либо используете CSS все время, либо при создании проекта выполняете ng new --style=scss

Источник

Я думаю, что вы импортируете не ту вещь, это должно быть:

@import '~@angular/material/theming';
Источник
Другие вопросы по тегам