Having a frustrating issue where my stylesheets are being included on the webpage but not applied correctly. Here's what's going wrong:
I'm attempting to utilize Angular material, and I've followed all the instructions in the beginner's guide.
Upon inspecting my app, I can see that the stylesheets are indeed being imported properly. However, the styles themselves are not being applied.
Here's a screenshot from my network tab: https://i.sstatic.net/b7x3D.png
The application tab confirms that the stylesheets have been applied: https://i.sstatic.net/hKR6c.png
I've attempted to include theme designs in three different ways:
1) By using
@import "~@angular/material/prebuilt-themes/indigo-pink.css";2) Adding a link element in index.html like this:
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">3) Creating an assets folder and placing all necessary files there like so: https://i.sstatic.net/Uovut.png
Then, in my angular-cli.json file, I've configured gulp as follows:
"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"
]
Afterwards, I included my stylesheet with:
<link rel="stylesheet" type="text/css" href="assets/StyleSheets/deeppurple-amber.css">However, when trying to use styles like:
<button md-raised-button color="primary">Click me!</button>The styles still weren't being applied.
If anyone can help me figure out what I'm doing wrong, I would greatly appreciate it. Also, let me know if you need the repository link to reproduce the issue.