Q:

Where to put scss affecting multiple components throughout multiple apps in Angular?

I'm refactoring some Angular (7) components, and I don't know if there is some optimal location to put common scss style to reference it in many components' styleUrls.
Before refactoring, the scss was all global, and had to be built in order to be used between the different apps. Now, most of the scss has been encapsulated, requiring as few global style as possible.
However, there are still some global scss that I could get ride of in the build since they affect a known number of components. In order to do that, I extracted the scss at the root of all those components, and refered it, just before each individual components scss, in the styleUrls. (using some structure tips from this article ) 
Here is what the import looks like for every components requiring controls.component.scss
styleUrls: ['../controls.component.scss', './autocomplete.component.scss']

The structure looks somewhat like this : 
LibName1
  src
  assets_source
    global_styles
      _global-files.scss
    main.scss
  lib
    controls
      control1
      control2
        control2.component.html
        control2.component.scss
        control2.component.ts   --> here is the styleUrls
      ...
      controls.component.scss   --> the file I'm using to store cross-components style, importing in styleUrls.

Up until this point, everything is working out fine. The problem arises when I want to use this same scss file (controls.component.scss) outside of this app. The more high-level structure of our project and libs look like this : 
ProjectName
  src
    app
      components
        component1
          component1.html
          component1.scss
          component1.ts    --> Where I want to refer to the controls.component.scss in the styleUrls
        component2
        ...
libs
  LibName1 --> The LibName1 from the previous structure example

I would like to be able to use the styles in the file controls.component.scss inside different components without having to build the lib and referencing its css in the main Project.  I'm open to moving this file somewhere else, and what I would like is not to have to manage super longue relative paths.
I want to know what are the best practices in this scenario.

A:

To use global for your app just put everything into your style.scss it will affect whole application style
If you want to import scss file from the library simply do like this 
@import "~bootstrap/scss/bootstrap";
@import "~toastr/toastr";
@import "~font-awesome/scss/font-awesome";

Simply use ~ to import the scss file from node_modules folder

