CODEWITHSUNDEEP
cssangularangular-material
karansys
karansys

Reputation: 2719

Angular material: include pre-built theme

I wanted to include prebuilt theme for angular app. I included below line in app.component.css.

@import "../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

I was surprised it didn't apply the theme to my app. Then from docs I inferred I should include, now it works but I am curious why?

@import "@angular/material/prebuilt-themes/indigo-pink.css";

Inside common stylesheet, style.css not app.component.css! and the path (../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css) makes more sense than "~@angular/material/prebuilt-themes/indigo-pink.css"

I have following questions,

1.What does it needs import only in style.css an why not inside appcomponent.css?

2.Though the path ~@angular/material/prebuilt-themes/indigo-pink.cs leads to nothing, how is the angular-material could pick the theme?

3.What does '~' mean in the above path?

To give more info, I have included project structure

enter image description here

Upvotes: 3

Views: 3489

Answers (0)

Related Questions