Angular 6 library shared stylesheets

Question

How can you setup a index.scss and import global stylesheets for variables, mixins, etc, to an angular 6 library?

Angular CLI generates a lib with a root component &

Answer 1

Have you tried setting the encapsulation level of the component to none as part of the component metadata? Like this:

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

The ViewEncapsulation levels are:

• ViewEncapsulation.Emulated: The default, Angular emulates a Shadow DOM.
• ViewEncapsulation.Native: Use the browser's own Shadow DOM.
• ViewEncapsulation.None: Styles are Global

Check out the Angular Docs on ViewEncapsulation and I wrote a blog post on it.