Not able to use a custom theme in Angular 4

Question

I'm trying to use my custom theme in my angular project. It's not working as expected, I get the following error:

./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/custom_theme.scss
Module not found: Error: Can't resolve '@angular/material/theming' in '/Users/mathiasschrooten/Downloads/skylux-admin/src'

My styles.css file:

@import "custom_theme.scss"

.mat-tab-label {
  flex: 1 1 auto;
}

My custom_theme.scss file:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-orange);
$candy-app-accent:  mat-palette($mat-orange, 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);

.angular-cli.json

      "styles": [
    "styles.css",
    "custom_theme.scss"
  ],

Thanks in advance!

@MathijsSegers I executed 'npm install --save @angular/material @angular/cdk' and 'npm install --save @angular/animations'. Is there anything else I should import? According to the docs that should be all, right? — Mathias Schrooten
– Mathias Schrooten, Commented Dec 13, 2017 at 10:01

WasiF · Accepted Answer · 2018-07-19 09:58:17Z

9

You can remove the @import "custom_theme.scss" from your styles.css. Since you have added the custom_theme.scss to your angular-cli.json (or angular.json for v6+) the import is not required.

After editing the angular.json file, you will need to run ng-serve again.

as per the official docs:

If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to add a new entry to the "styles" list in angular-cli.json pointing to the theme file (e.g., unicorn-app-theme.scss).

edited Jul 19, 2018 at 9:58

WasiF

29.2k16 gold badges130 silver badges137 bronze badges

answered Dec 13, 2017 at 9:51

Michael Doye

8,2015 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mathias Schrooten Over a year ago

No more errors but seems like Angular doesn't recognise any theme (no colors visible whatsoever and components don't work as expected)

Michael Doye Over a year ago

Try close the server and rebuild using ng-serve

Abdelhalim FELLAGUE CHEBRA Over a year ago

thanks bro, cant believe that restarting the server did the trick

Codewise Over a year ago

Please add restarting the server as the correct answer! :-)

Collectives™ on Stack Overflow

Not able to use a custom theme in Angular 4

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related