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

I think people may be missing the fact that while encapsulation options exist, global styles are output in style tags and can cascade throughout your project.

Here is my setup:

1. My global styles: styles.scss is output in style tags. The rules target all matching classes and elements as expected. Even within components.

2. Component styles are encapsulated. That is their value prop. They overwrite globals and keeps component-specific styles with the component family.

3. @includes such as variables.scss, mixins.scss etc. are included explicitly at the top of any component .scss files when needed.

@import '../../../../scss/includes/variables';

What else would we need?