How to have Bootstrap's scss variables globally in Angular without importing theme every time in each component?

1
votes

I know there is a way to use bootstrap's scss variables in angular by importing the _variables file in each component's scss file and then start using that variables and there is lots of questions answered with this approach.

But I think this way is not a good way. Is there another way to import variables file or whole bootstrap.scss file to use mixins and variables without importing necessories each time in each component style file?

  • I am using angular-cli v1.7.4
1
angulartwitter-bootstrapsassangular-cli
One way would be referencing it in index.html file. It will apply to every single page of your application. – Yhlas
Also if you use Angular Cli to generate the project, you can find style.css / style.scss. In there you can add your scss variables – Rukshan Dangalla
@RukshanDangalla That doesn't work, I've tried before. – bobsilon

1 Answers

4
votes

This is not possible. Each component style is compiled separately.

https://github.com/angular/angular-cli/issues/3700

What you can do is specify the stylePreprocessorOptions in .angular-cli.json file so that you can import variables like

@import 'variables';

Instead of something like

@import '../styles/_variables.scss';

It's just more convenient, but you still have to include it in each component scss file