我正在嘗試運行我的 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.
這是我的package.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 ></span>
<mat-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 ></span>
<mat-icon
aria-hidden="false"
aria-label="Example heart icon"
>
favorite
</mat-icon>
<mat-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;
}
我的環境：
角 CLI：14.0.0 節點：14.18.0
我無法構建角度專案。
uj5u.com熱心網友回復：
該錯誤的主要原因是您使用的是 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497314.html