如何将我的 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中文网其他相关文章！