首頁 > web前端 > css教學 > 如何在 Angular CLI 專案中成功從 CSS 過渡到 SCSS?

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

Patricia Arquette
發布: 2024-12-07 00:03:14
原創
810 人瀏覽過

How to Successfully Transition from CSS to SCSS in Angular CLI Projects?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板