由于之前上传截图可能看不清这次直接上传代码了：

packag.json------------------------

{

"name": "taskmgr",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

},

"private": true,

"dependencies": {

"@angular/animations": "^5.2.9",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

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

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/router": "^5.2.0",

"core-js": "^2.4.1",

"date-fns": "^1.29.0",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19"

},

"devDependencies": {

"@angular/cli": "~1.7.3",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/date-fns": "^2.6.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"node-sass": "^4.8.3",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

}

angularcli.json----------------- 截取部分

"apps": [

{

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico"

],

"index": "index.html",

"main": "main.ts",

"polyfills": "polyfills.ts",

"test": "test.ts",

"tsconfig": "tsconfig.app.json",

"testTsconfig": "tsconfig.spec.json",

"prefix": "app",

"styles": [

"styles.scss"

],

"scripts": [],

"environmentSource": "environments/environment.ts",

"environments": {

"dev": "environments/environment.ts",

"prod": "environments/environment.prod.ts"

}

}

],

"defaults": {

"styleExt": "scss",

"component": {}

}

styles.scss-------------------代码见下 

@import 'theme.scss'; //引入自定义主题

theme.scss-----------自定义主题出错

// 引入material自定义主题支持

@import '~@angular/material/theming';

// 引入material公用的主题风格

@include mat-core();

// 自定义颜色

$my-app-primary: mat-palette($mat-green);

$my-app-accent: mat-palette($mat-amber, A200, A100, A400);

$my-app-warn: mat-palette($mat-red);

// 利用自定义颜色组装自定义主题

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

// 设置自定义主题，使其生效

@include angular-material-theme($my-app-theme);

// 自定义颜色

$my-dark-primary: mat-palette($mat-blue-grey); // 主色

$my-dark-accent: mat-palette($mat-amber, A200, A100, A400); // 副色

$my-dark-warn: mat-palette($mat-deep-orange); // 警告色

// 利用自定义颜色组装自定义主题

$my-dark-theme: mat-dark-theme($my-dark-primary, $my-dark-accent, $my-dark-warn);

// 设置自定义主题，使其生效

.myapp-dark-theme {

@include angular-material-theme($my-dark-theme);

}

问题报错截图---------------

ERROR in ./node_modules/_raw-loader@0.5.1@raw-loader!./node_modules/_postcss-loader@2.1.2@postcss-loader/lib??embedded!./node_modules/_sass-loader@6.0.7@sass-loader/lib/loader.js??ref--8-3!./src/styles.scssModule build failed:

undefined

        ^

      Mixins may not be defined within control directives or other mixins.

      in C:\Users\Minos\Desktop\Angular4_\taskmgr\node_modules\_@angular_material@2.0.0-beta.7@@angular\material\_theming.scss (line 2440, column 10)