如何在 Angular CLI 專案中成功從 CSS 過渡到 SCSS？

Angular CLI 從 CSS 到 SCSS 的轉換

Angular CLI 提供了在專案中使用 SCSS 樣式表的能力。但是，如果您在實作 SCSS 時遇到「沒有這樣的檔案或目錄」錯誤，則需要採取某些步驟。

預設樣式擴充指令

如文件所述，執行「ng set defaults.styleExt scss」應將預設樣式擴充設為 SCSS。但是，此命令可能並不總是按預期工作。

現有項目的解決方案

1. 將預設樣式擴充更改為SCSS：

   將預設樣式擴充為SCSS：
2. 編輯.angular-cli.json （Angular 5.x及更早版本）或 angular.json (Angular 6 ) 檔案手動將“defaults.styleExt”設為“scss”。
   • 將CSS 檔案重新命名為SCSS：
3. 將現有的「.css」檔案轉換為「 .scss」並更新項目中的引用。
   • 將CLI 指向styles.scss:
4. 修改「樣式」 angular.json 檔案中的陣列指向新式的styles.scss
   • 更新元件引用：

調整各個元件檔案中的「styleUrls」屬性以反映更新後的內容SCSS檔案

為未來的專案設定預設值

建立新專案時，您可以在專案建立過程中指定樣式擴充：為所有新項目設定預設樣式擴充全球範圍：

以上是如何在 Angular CLI 專案中成功從 CSS 過渡到 SCSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！