angular - 找不到 Angular Material 核心主题

Question

我在我的项目中添加了 angular material2 包。但是，我在浏览器中收到以下警告消息，我创建了一个自定义 scss 文件并导入了包，但它仍然抛出警告消息:

找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。有关更多信息，请参阅主题指南:material.es5.js?7d89:180 https://material.angular.io/guide/theming

我已经创建了 style.scss 文件并包含了以下配置文件

套餐

 "@angular/material": "^2.0.0-beta.8",

样式.scss

在styles.scss @include 垫芯()将鼠标悬停在“mat-core”上时会显示(未声明的 mixin)警告消息

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

app.component.ts

require('./app.component.css');

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./style.scss'],
    encapsulation: ViewEncapsulation.None
})

Webpack.common.js

  module: {
        rules: [

{
                 test: /\.scss$/,
                 exclude: /node_modules/,
                 use: [
                     {
                         loader: 'raw-loader'
                     },
                     {
                         loader: 'sass-loader'
                     }
                 ]
             },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
            },
  ]
    },

Answer 1

这个简单的代码和平解决了这个问题:

app.module.ts

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

@NgModule({
providers:[ 
            {
            provide: MATERIAL_SANITY_CHECKS,
            useValue: false
            }
       ]
})