我想将所有样式移动到一个样式表中,而不要使用单个组件样式。我可以控制样式,但是当我包含@ angular / material组件时,它们将作为单独的样式标签添加:
我有一个styles.scss文件,该文件已经包含根据docu的材料设计。
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
如何将所有组件添加到单个样式表中?
编辑:这是添加@angular/material
模块的方式:
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 { }
答案 0 :(得分:0)
对angular-material-theme()
混合的调用将仅包括组件主题以及核心(全局)样式。不属于主题的Angular Material组件样式被封装并内置到组件中,并动态添加到DOM中。无法自动将这些样式包含在单个样式表中。即使您可以这样做,也可能一切都无法正常运行,此外,您还需要关闭组件插入DOM的样式标签,这是不可能的。此外,由于组件本身已经包含样式代码,因此您将在全局样式表中复制样式,从而在页面上增加很多大小。换句话说,您不能做到,也不应该做到。