Я пытаюсь запустить приложение angular 14, но получаю следующую ошибку при попытке обслуживать его локально. Взгляните на ошибку ниже:
Build at: 2022-06-28T06:24:59.368Z - Hash: 217d45d22093a51f - Time: 5857ms
./src/app/app.component.sass?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ .example-icon {
│ ^
╵
src/app/app.component.sass 1:15 root stylesheet
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
Вот мои зависимости пакет.json:
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/cdk": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/fire": "^7.4.0",
"@angular/forms": "^14.0.0",
"@angular/material": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"firebase": "^9.8.2",
"rxjs": "~7.5.0",
"sass-loader": "^13.0.2",
"tslib": "^2.3.0",
"webpack": "^5.73.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.0",
"@angular/cli": "~14.0.0",
"@angular/compiler-cli": "^14.0.0",
"@types/jest": "^28.1.1",
"jest": "^28.1.0",
"jest-preset-angular": "^12.1.0",
"node-sass": "^7.0.1",
"typescript": "~4.7.2"
},
App.component.html
<mat-toolbar color = "primary">
<mat-toolbar-row>
<span>Custom Toolbar</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Second Line</span>
<span class = "example-spacer"></span>
<mat-icon
class = "example-icon"
aria-hidden = "false"
aria-label = "Example user verified icon"
>
verified_user
</mat-icon>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Third Line</span>
<span class = "example-spacer"></span>
<mat-icon
class = "example-icon"
aria-hidden = "false"
aria-label = "Example heart icon"
>
favorite
</mat-icon>
<mat-icon
class = "example-icon"
aria-hidden = "false"
aria-label = "Example delete icon"
>
delete
</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
App.component.sass
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
Моя среда:
Угловой интерфейс командной строки: 14.0.0 Узел: 14.18.0
Я не могу построить угловой проект.
Основная причина ошибки в том, что вы используете файл SASS вместо SCSS. (Какая разница?) В соответствии с вашим синтаксисом вы хотите использовать SCSS. Поэтому вы должны переименовать файл стиля в app.component.scss и изменить Angular CLI, чтобы использовать синтаксис SCSS с помощью этой команды:
ng config schematics.@schematics/angular:component.styleext scss
Вы также можете взглянуть на этот пост здесь, чтобы изменить параметры Angular CLI на предпочитаемый синтаксис:
Опции Angular CLI SASS
Если вы хотите написать стиль в SASS, вы должны написать это так:
.example-icon
padding: 0 14px
.example-spacer
flex: 1 1 auto