Angular Material Theme Customization

Question

I'm trying to modify the theme of a project that has Angular 6 and it's using Angular Material 6.3.3

Currently, I just copied the code from the Material site and followed the steps but an error is popping out when I try to run 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.

My theme.scss file looks like this:

@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);

Answer 1

I think you're importing the wrong thing, it should be:

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

Answer 2

I found that the solution is to switch your project completely to SCSS or to use CSS only. The documentation of Angular Materials basically assumes that you are using SCSS so all of the content needs to be generated using a project it styles in SCSS.

So, in conclusion, you either use CSS all the time or when you are creating your project you execute ng new --style=scss