components: 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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (2 by maintainers)

Most upvoted comments

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';

+28

VRedondo-zz on Jan 12, 2018

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 😟

+12

CoreyCole on May 24, 2017

As @VRedondo said, removing the ~ at the ‘~@angular/material/prebuilt-themes/pink-bluegrey.css’ fixed this issue.

The question is why??? Documentation says to use ~.

I found many issues on github about importing prebuilt-themes, but most of them are closed as fixed, however this bug is still there. angular’s team should investigate issues like this one, because they are really boring.

Ks89 on Jan 14, 2018

In my case, at some point my app broke after I upgraded from Angular 2 to Angular 4. After reading @tschnoelzer’s comment, all I needed to do was change my import in my styles.css file from ~@angular/material/core/theming/prebuilt/pink-bluegrey.css to '~@angular/material/prebuilt-themes/pink-bluegrey.css';

No edits to angular-cli.json file were needed.

JamesMcCreary on May 16, 2017

I was following the other issue thread(#2277) and tried some solutions, but until now, nothing.

I followed the docs @kara referenced, but it stills returns the following error:

Argument $map of map-get($map, $key) must be a map Backtrace: node_modules/@angular/material/_theming.scss:35357, in function map-get node_modules/@angular/material/_theming.scss:35357, in function mat-contrast node_modules/@angular/material/_theming.scss:35372, in function mat-palette

My setup is like this: TLDR; ~I’m using @import "./../node_modules/@angular/material/theming"; because with ~@angular sintax didn’t found the file.~ I’m using ~@angular/material/_theming.scss due to an issue with a new version (6.0.4) of sass-loader (see #4449 ), but it returns the error above. I’m using @angular/cli 1.0.1 and @angular/material 2.0.0-beta.3.

Edit: Thanks to @willshowell for the heads up .

src/theme.scss

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

@include mat-core();

// My Hero Academia Theme
$mha-app-primary: mat-palette($mat-indigo);
$mha-app-accent:  mat-palette($mat-yellow, A200, A100, A400);
$mha-app-warn:    mat-palette($mat-red);
$mha-app-theme:   mat-light-theme($mha-app-primary, $mha-app-accent, $mha-app-warn);

// Black Friday Theme
$bf-app-primary:  mat-palette($mat-dark-theme-background);
$bf-app-accent:   mat-palette($mat-yellow, A200, A100, A400);
$bf-app-warn:     mat-palette($mat-red);
$bf-app-theme:    mat-dark-theme($bf-app-primary, $bf-app-accent, $bf-app-warn);

.blackfriday-theme {
    @include angular-material-theme($bf-app-theme);
}

// Default Theme
@include angular-material-theme($mha-app-theme);

package.json

{
  //(...)
  "dependencies": {
    "@angular/animations": "^4.1.1",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
  //(...)
}

angular-cli.json

{
  //(...),
  "styles": [
      "styles.css",
      "theme.scss"
  ],
  //(...)
}

klauskpm on May 10, 2017

I was also facing this … as i also import @import ‘~https://fonts.googleapis.com/icon?family=Material+Icons’; using font awesome I had to follow agusdutras hint and use

styles.css for fonts ( above) and styles.scss for material theme, also had to change URL to @import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;

using this in cli config:

“styles”: [ “styles.scss”, “styles.css”, “…/node_modules/font-awesome/css/font-awesome.css” ],

tschnoelzer on Apr 20, 2017

@CoreyCole I’m ashamed to say… the same thing happened to me 😃

ccdle12 on Jul 6, 2017

I was facing the same issue.

I just changed ‘style.css’ to ‘style.scss’, updated it reference on the styles section of .angular-cli.json and it started working with the template improted just like the one in the material.angular.io example.

No need to include ‘custom_theme.scss’ on the angular-cli.

hope it helps.

agusdutra on Apr 3, 2017

@darrenbrett You’ll want to do two things:

Remove the prebuilt “deep purple” theme from your styles.css. You don’t want that to compete.
Add your custom_theme.scss file to your angular-cli.json file under “styles”.

See more here: https://github.com/angular/material2/blob/master/guides/theming.md

kara on Mar 10, 2017