如何在 Angular CLI 项目中成功从 CSS 过渡到 SCSS？

Angular CLI 从 CSS 到 SCSS 的转换

Angular CLI 提供了在项目中使用 SCSS 样式表的能力。但是，如果您在实现 SCSS 时遇到“没有这样的文件或目录”错误，则需要采取某些步骤。

默认样式扩展命令

如文档中所述，运行“ng set defaults.styleExt scss”应将默认样式扩展设置为 SCSS。但是，此命令可能并不总是按预期工作。

现有项目的解决方案

1. 将默认样式扩展更改为 SCSS：

   • 编辑 .angular-cli.json （Angular 5.x 及更早版本）或 angular.json (Angular 6 ) 文件手动将“defaults.styleExt”设置为“scss”。

2. 将 CSS 文件重命名为SCSS：

   • 将现有的“.css”文件转换为“.scss”并更新项目中的引用。

3. 将 CLI 指向 styles.scss:

   • 修改“样式” angular.json 文件中的数组指向新的 styles.scss

4. 更新组件引用：

   • 调整各个组件文件中的“styleUrls”属性以反映更新后的内容SCSS文件

为未来的项目设置默认值

创建新项目时，您可以在项目创建过程中指定样式扩展：

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

为所有新项目设置默认样式扩展全球范围：

ng config --global defaults.styleExt=scss

以上是如何在 Angular CLI 项目中成功从 CSS 过渡到 SCSS？的详细内容。更多信息请关注PHP中文网其他相关文章！