Question

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

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

我创建了styles.scss文件并包含以下配置文件

封装

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

styles.scss

在styles.scss @include mat-core（）中，将鼠标悬停在“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
            }
       ]
})

找不到Angular Material核心主题

1 个答案: