angular-cli how to add global styles?

Question

I created a global style sheet using sass and put it in the public/style/styles.scss. I only specify a background color.

In the index, I added a link to

Answer 1

For elements outside of the scope of your application's (e.x. ) you can use the solution other's provided.

If the element is inside your application, you could also not make it global and instead define the styles in a string, then import it into the styles property on the Component class decorator where you want to use those styles.

That way you will get encapsulation and re-use. It just comes with the downside of writing it in a string which may limit your editor's capacity to offer static analysis of your styles.

AFAIK, the angular cli will not compile it twice.

Example:

const tableStyles = `
    table { color: red; }
`;
@Component({
    selector: 'app-overview',
    templateUrl: './overview.component.html',
    styleUrls: ['./overview.component.scss'],
    styles: [tableStyles] // <- here
})
export class OverviewComponent { ... }

And if you want to have the styles in a proper file, you can apply the same logic to the styleUrls property.

Example:

@Component({
    selector: 'app-overview',
    templateUrl: './overview.component.html',
    styleUrls: [
        './overview.component.scss', 
        '../common/table-styles.scss' // <- here
    ]
})
export class OverviewComponent { ... }