Clever Geek Handbook

Angular 2 Material Custom Themes

I am using Angular 2 with Angular Material and I need to create a custom theme to use custom colors for the components. I have followed the angular docs but I cannot get it to run.

What I have done so far:

1.I created my-theme.scss file:

@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 generated 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 site under localhost tells me that no compiled module was found: '../ node_modules / @ angular / material / _theming'.

I tried several options for the import path ("~ @ angular / material / _theming", "../node_modules/@angular/material/_theming", "~ @ angular / material / theming", "../node_modules/@angular/ material / theming "...) in the my-theme.scss file. In the Angular docs they use "theming" as the location, but I read somewhere that Angular Material shifts the file to "_theming" which I also found in my swing framework.

When I use the path "../ node_modules/@angular/material/_theming.scss" the compiler finds the file, but the compilation fails 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 strikes me as odd because the _theming.scss file is the Angular stuff file and the error location is the comment. Also, I have not seen any import statement ending in .scss in other working implementations on the internet.

I've been searching for hours how to add custom themes to my site ... Am I missing something? I am new to Angular 2 and SASS.

PS: I'm already a little confused if I need to import my-theme.scss to styles.css or not. The Angular docs don't talk about it, but I've read some comments where people state that it fixes 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

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

+3


source to share


2 answers


This will help:



  • Change the name of the theme file to _my-theme.scss

  • Change styles.css

    tostyles.scss

  • Import your theme to a file styles.scss

    , for example:

    @import './path/to/your/theme/my-theme'; // You don't need underscores and file extension here

  • You don't need to include the theme file in styles: []

+2


source


You probably need to change your application to use sass. In the angular-cli file, change the line:

"styleExt": "css",

To:

"styleExt": "scss",

Then rename all your css files to scss. put your mysese.scss in there.

Also change in cli after renaming



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

Then, in the assets folder, create a folder named styles.

so it will be like

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

and then in your style.scss file, import it like this:

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


source






More articles:


All Articles