CODEWITHSUNDEEP
cssangularangular-material
Himanshu Mittal
Himanshu Mittal

Reputation: 612

Material Styles are not being applied in angular app after being correctly imported

My problem is that my stylesheet are getting correctly included in the webpage, but the styles are not getting applied. The problem is as follows:

I am trying to use Angular material, i've correctly setup my app as was shown in the begginer's guide.

I inspected my app and the stylesheets are correctly getting imported (included). However, the styles are not being appplied.

A Screenshot of my network tab: Network tab screenshot

the application tab also tells that stylesheets have been applied: applcation tab screenshot

I have tried to include the theme designs via three ways:

1) using @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in styles.css

2) using link element in index.html like: <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> (it didnot worked out)

3) so i made an assets folder and placed all my files there like: assets folder structure

and then in my angular-cli.json file i have gulp configured like:

"assets": [
    { "glob": "**/*", "input": "./assets/Images/", "output": "./assets/Images/" },
    { "glob": "**/*", "input": "./assets/StyleSheets/", "output": "./assets/StyleSheets/" },
    { "glob": "**/*", "input": "./assets/Javascript/", "output": "./assets/Javascript/" },
    { "glob": "**/*", "input": "./assets/Json/", "output": "./assets/Json/" },
    "favicon.ico"
  ]

and i included my stylesheet afterwards like: <link rel="stylesheet" type="text/css" href="assets/StyleSheets/deeppurple-amber.css"> and it worked.

However, when i tried to use the styles like: <button md-raised-button color="primary">Click me!</button>

the styles were not getting applied.

please help me to find out what wrong am i doing.

And let me know if you need the repository link for re-producing the problem.

Upvotes: 0

Views: 2089

Answers (2)

Micky Q
Micky Q

Reputation: 129

There is a Bug in Angular Material I was able to fix it by remove '~' in import @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to @import "@angular/material/prebuilt-themes/indigo-pink.css";

Upvotes: 0

Emiliano Verazay
Emiliano Verazay

Reputation: 25

I had the same problem. I solved it putting the style in the angular-cli.json file:

"styles": [
    "styles.scss",
    "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],

Upvotes: 1

Related Questions