使用 SCSS 時如何修復 Angular-CLI 中的'styles.bundle.js:33 Uncaught Error”？

對將Angular-CLI 與SCSS 結合使用時的「styles.bundle.js:33Uncaught Error」錯誤進行故障排除

錯誤原因

發生錯誤是因為 CLI 仍在嘗試尋找並捆綁 CSS 文件造型。 Angular-CLI 最初以 CSS 作為預設樣式擴展。當您嘗試使用 SCSS 時，必須設定 CLI 來識別和處理 SCSS 檔案。

現有項目的解決方案

1. 更新預設樣式擴充：

   • 在Angular 中5.x 及更早版本，修改.angular-cli.json 檔案。
   • 在 Angular 6 中，更改 angular.json 檔案。
   或者，執行 ng config defaults.styleExt=scss。如果這導致錯誤，請使用ng config Schematics.@schematics/angular:component.styleext scss.

2. 將CSS 檔案重新命名為SCSS:
   • 將CSS 檔案重新命名為SCSS:

3. 更改styles.css 和組件CSS 檔案（例如， app/app.component.css) 到 styles.scss 和對應的元件 SCSS 檔案。

   • 更新 Angular.json （僅適用於 Angular 6 ）：

4. 修改apps[0].styles中的檔案副檔名angular.json.

   • 將元件指向新樣式檔案：

將組件定義中的styleUrls屬性改為符合新的SCSS檔案

1. 未來專案的解決方案

2. 在專案建立過程中設定樣式擴充：

   • 使用建立新專案時ng new，指定 --style=scss。

設定全域預設值：如果您喜歡SCSS作為所有未來專案的預設擴展樣式，運行：ng config --global defaults.styleExt=scss

以上是使用 SCSS 時如何修復 Angular-CLI 中的'styles.bundle.js:33 Uncaught Error”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！