Myujth

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 

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.