Error Setting Up Custom Material Theme in Angular-CLI Project

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 go. 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);

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/cli-ark/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.

[VRedondo-zz]

Had the same issue with CLI: 1.6.4 node: 9.2.0 Angular: 5.0.0 Material: 5.0.4

just need to remove the ~ at the '~@angular/material/prebuilt-themes/pink-bluegrey.css';

[CoreyCole]

Maybe it’s just me, but I had to restart the ng serve to get mine working. Spent more time than I’d like to admit before I figured that out 😟