J'essaie d'utiliser un thème personnalisé, mais l'erreur persiste:
{
"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"
}
J'ai installé un nouveau brandy Angular juste pour le tester, et j'obtiens toujours la même erreur. J'ai essayé:
$ ng new test-material
$ cd test-material/
$ npm install --save @angular/material
Ensuite, j'ai créé un fichier nommé src/Unicorn.scss
et collé l'exemple de thème personnalisé à partir de https://material.angular.io/guide/theming et essayé de le compiler à l'aide de: $ node-sass src/Unicorn.scss dist/Unicorn.css
J'ai eu l'erreur mentionnée précédemment. Le contenu de Unicorn.scss
est:
@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);
J'utilise Angular 4 et Material 2.0.0-beta.3. Ceci est mon 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"
}
}
Mettez ceci dans votre .angular-cli.json:
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules"
]
},
Je résous le problème précédent comme suit.
Premier pas:
Créez customTheme.scss
dans le répertoire src
.
@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);
Important: la déclaration d'importation dépend de la version du matériau angulaire et l'emplacement de la déclaration d'importation dépend également de votre emplacement customTheme.scss
.
Deuxième étape:
Ajoutez customTheme.scss
au tableau de styles dans .angular-cli.json
styles": [
"styles.css",
"customTheme.scss"
],
Dans la version de matériau 2.0.0-beta.3
, il n'y a pas de fichier '~@angular/material/theming';
Si vous consultez le répertoire node_modules/@angular/material
, vous verrez qu'il y a _theming.scss
. Vous devez donc:
@import '~@angular/material/_theming';
IMPORTANT:
Il y a un bogue dans le sass-loader version 6.0.4 vous devez ajouter l'extension .scss
à votre import@import '~@angular/material/_theming.scss';
avec le prochain sass-loader v6.0.5
prochain .scss
n'est plus nécessaire
Remplacez @import '~ @ angular/material/core/theming/all-theme'; Avec @import "~@angular/material/_theming.scss";
aussi, utilisez un mat-core au lieu de md-core.
@include mat-core ();