如何在 webpack 应用程序中包含 angular 2 material 主题。（潮人）？

Question

我正在尝试将 angular material 模块导入到我的应用程序中。我做了接下来的事情：安装了 angular material

yarn add @angular/material

包括必要的模块

@NgModule({
    imports: [
        DevizionSharedModule,
        BrowserAnimationsModule,
        MdCardModule,
        MdTabsModule,

在我的 vendor.scss 中包含默认样式 @import '~@angular/material/prebuilt-themes/indigo-pink.css';

但这似乎不起作用，我错过了什么？

Answer 1

在您的 app.module.ts 中导入 angular material 模块并将其添加到导入元数据中：

import { MaterialModule } from '@angular/material';

然后将其添加到导入元数据中：

imports: [
  MaterialModule,
   .....
  ]

同时在全局 scss 文件中添加这一行：

@import '~@angular/material/core/theming/all-theme';
@include mat-core();

此外，您可能需要在 index.html 中添加此样式表才能在您的应用中使用 material 图标：

<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

Answer 2

添加material和hammerjs
yarn add @angular/material hammerjs（如果需要，安装纱线） Material 应该是： "@angular/material": "^2.0.0-beta.2" version
在每个实体模块中导入material模块和hammerjs
“从'@angular/material'导入{Material模块}；导入 'hammerjs'；" 在导入数组
将样式添加到 vendor.scss。在bootstrap
之前加上 @import 'node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.scss';

How to include theming the angular 2 material in webpack app. (JHipster)?