找不到Angular Material核心主题 [英] Could not find Angular Material core theme

问题描述

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

I have added angular material2 package to my project. However, I get the following warning message in browser i have created a custom scss file and imported the packages still it throw's warning message:

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

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: material.es5.js?7d89:180 https://material.angular.io/guide/theming

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

I have created styles.scss file and included following configuration file

包装

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

styles.scss

在styles.scss @include mat-core()中，将鼠标悬停在"mat-core"显示屏上(未声明的混合)警告消息

In styles.scss @include mat-core() while hovering mouse on 'mat-core' displays (Undeclared mixin)warning message

@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'],
            },
  ]
    },

推荐答案

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

This simple peace of code solved the issue:

app.module.ts

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

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

这篇关于找不到Angular Material核心主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！