@angular/material styles in a single stylesheet

Question

I want to move all the styles into a single stylesheet, no individual component styles. I can control my styles, however when I include @angular/material components, they are added as individual style tags:

I have a single styles.scss file, which already includes the material designs according to the docu.

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

How can I also add all the components into the single stylesheet?

Edit: this is how the @angular/material modules are added:

import { NgModule } from '@angular/core';
import {
  MatButtonModule,
  MatGridListModule,
  MatIconModule,
  MatListModule,
  MatSidenavModule,
  MatToolbarModule,
} from '@angular/material';

@NgModule({
  exports: [
    MatButtonModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatToolbarModule,
  ]
})
export class MaterialModule { }

Yes, the styles are imported via '@include angular-material-theme($candy-app-theme);' which should add all components to the stylesheet. However the styles are still done via adding style tags — Stefan
Besides global styles material also uses local styles through styleUrls like github.com/angular/material2/blob/… So they are added as inline styles — yurzui

G. Tranter G. Tranter · Accepted Answer · 2018-11-16T21:31:58

A call to the angular-material-theme() mixin will include theming only for components plus core (global) styles. Angular Material component style that is not part of theming is encapsulated and built in to the component and dynamically added to the DOM. There is no way to automatically include those styles in a single stylesheet. Even if you could do that, it is possible that everything might not work properly, plus you would also need to turn off the style tags inserted into the DOM by the components, which isn't possible. Furthermore, since the components themselves already contain the style code, you would be adding a lot of size to the page by duplicating the style in a global stylesheet. In other words, you can't do it and it shouldn't be done.

@angular/material styles in a single stylesheet

1 Answers