如何將我的 Angular-CLI 專案從 CSS 轉換為 SCSS？

將Angular-CLI 項目從CSS 轉換為SCSS

嘗試在Angular-CLI 項目中使用SCSS 時，您可能會遇到錯誤關於styles.css 檔案不存在。儘管使用 ng set defaults.styleExt scss 指令將預設樣式擴充設為 SCSS，還是會出現此錯誤。

解決方案：

要解決此問題，請按照以下步驟操作:

對於現有項目（Angular CLI版本早於6):

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

   • 手動編輯.angular-cli.json文件，將css替換為scss在styles 陣列中。

   • 或者，運行命令：

     ng config defaults.styleExt=scss

2. 將現有CSS 文件轉換為SCSS：

   • 將所有現有.css 檔案重新命名為.scss，包括styles.css.

3. 調整建置配置：

   • 編輯.angular-cli.json 中的apps[0]. styles 屬性檔並將.css副檔名替換為.scss.

4. 更新元件樣式：

   • 更改元件檔案中的 styleUrls 陣列以指向新的 .scss 檔案。

對於現有項目（Angular CLI 版本6）：

使用與上述相同的步驟，編輯angular.json 文件而不是.angular-cli.json。此外，如果您遇到「找不到值」錯誤，請執行以下命令：

ng config schematics.@schematics/angular:component.styleext scss

對於新項目：

1. 建立新檔案時指定SCSS 作為樣式擴充項目：

   ng new your-project-name --style=scss

2. 將SCSS 設定為所有未來專案的預設值（可選）：

   ng config --global defaults.styleExt=scss

透過執行下列步驟，您將成功設定 Angular-CLI 專案以使用 SCSS。

以上是如何將我的 Angular-CLI 專案從 CSS 轉換為 SCSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！