How to include a Sass theme in all Angular Components?

Question

I want to create a theme with Sass in Angular.

I use Bootstrap architecture of files:

style/
|– main.scss   # Manifest file 
|– _alerts.scss     # Component file 
|– _buttons.scss    # Component file 
|– _mixins.scss     # Mixin file – imports all files from mixins folder
|–  ...             # Etc..
|– mixins/
|  |–  _alerts.scss # Alert mixin
|  |– _buttons.scss # Button mixin
|  |– ...           # Etc..

I want to use some mixin or other classes in the sass of the components, how i can do that?

Is possible to include only one time the manifest file and be included automatically in all components?

I know that is a good practice to keep the style of component atomic but how i can implement a design system if i cannot use a global style?

You import the files in your main styles.scss file to have the styles available everywhere. To use a mixin, you'll still have to import it in the respective style file — baao
– baao, Commented Oct 14, 2019 at 8:21
@chrispbacon Hi Cris, but i want to use mixins without include it for every component sass. I think it's not a good practice. — Alessandro_Russo
– Alessandro_Russo, Commented Oct 14, 2019 at 8:35

Alberto Rhuertas · Accepted Answer · 2019-10-11 12:55:01Z

1

You can add your main.scss path to the angular.json and thus use your custom SASS theme for all the components.

A example of an angular.json file with some global styles:

answered Oct 11, 2019 at 12:55

Alberto Rhuertas

7734 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alessandro_Russo Over a year ago

Ok thanks for the answer but i cannot use mixin in sass component, only the style resulted from scss. Also I've do that and i've a problem because in the main.scss i import also the font and i have a flash font issue.

Collectives™ on Stack Overflow

How to include a Sass theme in all Angular Components?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related