Angular 2 Material Custom Themes

Question

I am using Angular 2 with Angular Material and I need to create a custom theme, in order to use custom colors for components. I followed the angular docs, but I can´t get it running.

What I did so far:

1.I created a file my-theme.scss:

@import "../node_module/@angular/material/_theming";

@include mat-core();

$my-theme-primary: mat-palette($mat-amber);
$my-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$my-theme-warn: mat-palette($mat-red);

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

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

2.I imported the created SASS file into styles.css

@import "my-theme.scss"

3.I referenced it in the .angular-cli.json file in the styles section:

"styles": [
   "styles.css",
   "my-theme.scss"
]

My website under localhost tells me "compilation failed" module not found: '../node_modules/@angular/material/_theming'.

I tried several variations of the import path ("~@angular/material/_theming", "../node_modules/@angular/material/_theming", "~@angular/material/theming", "../node_modules/@angular/material/theming"...) in my-theme.scss file. In the Angular Docs they use "theming" as location, but I read somewhere, that Angular Material shiftet the file to "_theming", which I also found in my foulder structure.

When I use the path "../node_modules/@angular/material/_theming.scss" the compiler finds the file, but the compilation failes due to another error:

    Module build failed: Missed semicolon (30:1)  
  28 | // Media queries  
  29 | // TODO: Find a way to respect media query ranges. 
> 30 | // TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.     
     | ^  
  31 | $mat-xsmall: 'max-width: 600px';  
  32 | $mat-small: 'max-width: 960px';

This seems weird to me, because the _theming.scss file is an Angular Material file and the position of the error is a comment. Also I didn´t see any import statement ending with .scss in other working implementations on the web.

I spent hours searching how to add custom theming to my website... Did I miss something? I am quite new to Angular 2 and SASS.

PS: I am already a bit confused, if I should import my-theme.scss into styles.css or not. The Angular Docs dont say a word about it, but I read some comments, where people state, that this fixed their problems with custom Angular Material themes.

Project Structure:

my-project
 |--node_modules
 | |--@angular
 |   |--material
 |     |--prebuild-themes
 |     |--_theming.scss
 |--src
 | |--app
 | | |--my-component.css | html | ts
 | | |--app.module.ts
 | |--assets
 | |--index.html
 | |--main.ts
 | |--my-theme.scss
 | |--styles.css
 |--.angular-cli.json

The package.json file:

  "dependencies": {
    "@angular/animations": "^4.3.1",
    "@angular/cdk": "^2.0.0-beta.8",
    "@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.8",
    "@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.2.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Windows 7, 64 Bit Firefox 52.2.1 Visual Studio Code 1.14.1

I had the same problem. Picking up from the answer from @Faisal I changed style.css to style.scss and also made the same change in .angular-cli.json and it works. You don't need to include the theme scss file in .angular-cli.json. Note, I didn't need to add an underscore to the beginning of the theme scss file name. — camden_kid, Jul 29 '17 at 17:57

score 2 · Accepted Answer · answered Jul 28 '17 at 14:48

2

This will help:

Change your theme file name to _my-theme.scss
Change your styles.css to styles.scss
Import your theme into the styles.scss file like:

@import './path/to/your/theme/my-theme'; // You dont need the underscore and file extention here
You dont need to include your theme file in styles: []

answered Jul 28 '17 at 14:48

FAISAL

33,618
10
97
105

3

Thanks, your answer and [this one](https://stackoverflow.com/questions/36220256/angular2-angular-cli-sass-options) helped me out. To solve the problem, I created a new Angular Project with the CLI command `ng new my-project --style=scss` (of course I needet to use `npm install` and [all commands to setup Angular 2 Material](https://material.angular.io/guide/getting-started) too). Then I added the _my-theme.scss file (see [SASS Partials](http://sass-lang.com/guide)) and added `@import "my-theme"` to styles.scss (both files are in the same folder). – Polarfox Jul 31 '17 at 11:28
Glad it helped ! Cheers (Y) – FAISAL Jul 31 '17 at 11:30
After setting up the new project my angular-cli.json file defines `"styles": ["styles.scss"]` and `"defaults": {"styleExt": "scss", "component": {} }`. Changing the two vars manually did not work in the old project, that´s why I decided to make an entire new project with scss support and copy my components and other content to the new project. – Polarfox Jul 31 '17 at 11:36
Remember that you only need to change the "styleExt" to "scss" when your component styles are defined in scss files. This should also work manually, I had done the same in one of my projects. – FAISAL Jul 31 '17 at 11:39
I just spent hours on this same issue. I tried manually updating the .css files to .scss and didn't have any luck. Recreating the whole project from scratched with the `--style=scss` flag fixed things. – clk Dec 03 '17 at 23:04

score -1 · Answer 2 · answered Jul 27 '17 at 07:51

-1

You probably need to change your app to use sass. On your angular-cli file change the line:

"styleExt": "css",

To:

"styleExt": "scss",

Then rename all your css files to scss. put your my themse.scss there.

Also change on the cli after you rename

"styles": [
   "styles.scss",
   remove this line =>"my-theme.scss"
]

Then on the assets folder create a folder named styles.

so it would be like this

|--assets
   |--styles
      |--_my-theme.scss

and then on the style.scss file import it like this:

@import "~assets/styles/_my-theme.scss";

answered Jul 27 '17 at 07:51

Eduardo Vargas

8,752
2
20
27

Thanks for your answer. Unfortunatly it is not working for me, but maybe I missunderstood something. – Polarfox Jul 28 '17 at 07:23
I changed "styleExt": "css" to "scss", removed the "my-theme.scss" reference from "styles" in the angular-cli file, adapted the folder structure and the import statement. What did you mean with "put your theme.scss there"? Where should I put the theme.scss file? – Polarfox Jul 28 '17 at 07:24
The build failes now: "ERROR in ./src/app/app.component.scss Module bild failed: Error: ENOENT: no such file or directory, scandir 'C:\angularworkspace\kundenportal\node_module\node-sass\vendor'" then the stack trace and in the end "multi webpack-dev-server/client?http:localhost:4200 ./src/main.ts' – Polarfox Jul 28 '17 at 07:29
If you are using sass correctly you can just import your themes and general styles on the style.scss file and on your angular-cli file have just the style.scs. – Eduardo Vargas Jul 28 '17 at 07:43
Your styles should be like this -> assets>styles>theme.scss – Eduardo Vargas Jul 28 '17 at 07:44

Angular 2 Material Custom Themes

2 Answers2

Linked