Accessing bootstrap scss variables in angular 2 component

Question

I\'m working on a new Angular2 project built using Angular CLI and have configured the project to use SCSS. I have Bootstrap 4 successfully loaded into my styles.scss<

Answer 1

A few people have suggested @import-ing the variables.scss in every component .scss but I found this a little messy. Doing so did not also work well with the way our company CSS is architectured. I ended up going in this direction to enable me to use the variables, mixins, and also extend styles. This also allows me to manage all of the CSS in one location.

I'm currently working on a project that has been generated by Angular2 CLI. So there is a main style.scss

---

Another way I was able to accomplish this is by doing the following:

1. Removing the styleUrls from the app.component.ts files.

   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html'
       // styleUrls: ['./app.component.scss']
   });
   

2. I manage all the less files in the main styles.scss. So my current setup looks something like:

   // Bootstrap
   @import "../node_modules/bootstrap-less/bootstrap/index";
   
   // Company Branding
   @import "theme/index";
   
   // Components
   @import "app/app.component.scss";
   @import "app/search/search.component.scss";
   

---

Hopefully this alternative solution will be helpful to someone.