Error Setting Up Custom Material Theme in Angular-CLI Project

[darrenbrett]

My development environment:
/cli: 1.0.0-beta.31
node: 7.4.0
os: darwin x64

I am using material2 elements throughout my Angular 2 app, but would now like to be able to control the colors used for those elements. To do so I am trying to set up a custom theme to use. So far, no luck. My understanding is I need to do the following:

1.) Create a new file at the src level of the app. I have done that, and have a file titled "custom_theme.scss" that looks like this:

@import '~@angular/material/core/theming/all-theme';
 @import 'sass-material-colors-classes';
 @include md-core();
 
 // Customizations go here, for instance:
 $app-primary: md-palette($md-indigo);
 $app-accent:  md-palette($md-green, 500);
 $app-warn:    md-palette($md-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $app-theme: md-light-theme($app-primary, $app-accent, $app-warn);
 
 @include angular-material-theme($app-theme);

2.) I am then including that as an import in my src level "styles.css" file, like this:

    @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
    @import 'custom_theme.scss';

When I then try and boot up the app, I get a compilation error:

ERROR in .//css-loader?{"sourceMap":false}!./src/custom_theme.scss
Module not found: Error: Can't resolve
'@angular/material/core/theming/all-theme' in
'/Users/dg/Documents/abc/kra/abc/src' @
.//css-loader?{"sourceMap":false}!./src/custom_theme.scss 3:10-123 @
.//css-loader?{"sourceMap":false}!.//postcss-loader!./src/styles.css
@ ./src/styles.css @ multi ./src/styles.css

Not sure what's going on here. Some additional info, I'm actually using LESS in this app. But according to the official docs, this shouldn't be a problem - as it states that one doesn't need to be using scss throughout the app, it's just this one file that needs to be scss. And, because this is an Angular-CLI project, it should compile automatically.

[lobo-tuerto]

Have you tried upgrading your ng-cli version? (at this moment: @angular/cli: 1.0.0-rc.1).

Check this out: https://github.com/angular/angular-cli/wiki/stories-rc-update

[dbkirk4211]

It looks like this is old, but the docs currently say:

"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)."

From your comment, it looks like you added it to styles.css. The docs says to add it to your angular-cli.json file.

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

Hope that helps.

[filipesilva]

Closing as inactive, thanks to @lobo-tuerto and @dbkirk4211 for the answers as well 👍 .

[patapron]

Hello, I added my new theme.scss file like:
"styles": [ "styles.css", "theme.scss" ]
But nothings happens.

I using angular-cli 4

[westdabestdb]

i am experiencing same issue, any fix so far?

[kunjan343]

I done this setup and its working perfect.
Angular : v4.2.4
Angular Material 2 : 2.0.0-beta.12

in angular-cli file

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

create theme file

/*
Modify your theme settings here
*/
@import '~@angular/material/theming';

@include mat-core();

$primary: mat-palette($mat-grey, 800);
$accent: mat-palette($mat-light-blue, 500);

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

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

/*--------- scrollbar -----------*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: mat-color(mat-palette($mat-grey, 500));
} 

and its done.

[nikhil8github]

Where to create the file???

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}