Angular 4 + Material 2 SASS编译错误“找不到要导入的文件或不可读的文件"; [英] Angular 4 + Material 2 SASS compile error "File to import not found or unreadable"
问题描述
我正在尝试使用自定义主题,但我不断收到错误消息:
I'm trying to use a custom theme but I keep getting the error:
{
"status": 1,
"file": "/home/adam/Projects/test-material/src/unicorn.scss",
"line": 1,
"column": 1,
"message": "File to import not found or unreadable: ~@angular/material/theming.\nParent style sheet: /home/adam/Projects/test-material/src/unicorn.scss",
"formatted": "Error: File to import not found or unreadable: ~@angular/material/theming.\n Parent style sheet: /home/adam/Projects/test-material/src/unicorn.scss\n on line 1 of src/unicorn.scss\n>> @import '~@angular/material/theming';\n ^\n"
}
我已经安装了全新的Angular只是为了对其进行测试,但我仍然遇到相同的错误. 我试过了:
I've installed a brandy new Angular just to test it, and I keep getting the same error. I tried:
$ ng new test-material
$ cd test-material/
$ npm install --save @angular/material
然后,我创建了一个名为src/unicorn.scss
的文件,并从 https://material粘贴了示例自定义主题.angular.io/guide/theming 并尝试使用以下命令对其进行编译:
$ node-sass src/unicorn.scss dist/unicorn.css
我收到了前面提到的错误.
unicorn.scss
的内容是:
Then I created a file named src/unicorn.scss
and pasted the example custom theme from https://material.angular.io/guide/theming and tried to compile it using:
$ node-sass src/unicorn.scss dist/unicorn.css
I got the previously mentioned error.
The content of unicorn.scss
is:
@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
我正在使用Angular 4和Material 2.0.0-beta.3 这是我的package.json:
I'm using Angular 4 and Material 2.0.0-beta.3 This is my package.json:
{
"name": "test-material",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
推荐答案
我解决了以下类似问题.
第一步:
在src
目录中创建customTheme.scss
.
I solve preceding issue like following.
First step:
Create customTheme.scss
in src
directory.
@import '../node_modules/@angular/material/_theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-cyan);
$candy-app-accent: mat-palette($mat-green, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
重要提示:导入语句取决于有角度的材质版本,并且导入语句的位置也取决于您的customTheme.scss
位置.
Important: import statement depends to angular material version and also import statement location depends to your customTheme.scss
location.
第二步:
将customTheme.scss
添加到.angular-cli.json
Second step:
Add customTheme.scss
to styles array in .angular-cli.json
styles": [
"styles.css",
"customTheme.scss"
],
这篇关于Angular 4 + Material 2 SASS编译错误“找不到要导入的文件或不可读的文件";的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!