使用 SCSS 时如何修复 Angular-CLI 中的'styles.bundle.js:33 Uncaught Error”？

对将 Angular-CLI 与 SCSS 结合使用时的“styles.bundle.js:33Uncaught Error”错误进行故障排除

您遇到了 Angular 的问题-CLI使用时抛出错误“styles.bundle.js:33Uncaught Error” SCSS。虽然文档指出运行 ng set defaults.styleExt scss 应该可以解决此问题，但它不适合您。让我们探讨一下这背后的原因并提供全面的解决方案。

错误原因

发生错误是因为 CLI 仍在尝试查找并捆绑 CSS 文件造型。 Angular-CLI 最初以 CSS 作为默认样式扩展。当您尝试使用 SCSS 时，必须配置 CLI 来识别和处理 SCSS 文件。

现有项目的解决方案

1. 更新默认样式扩展：

   • 在 Angular 中5.x 及更早版本，修改 .angular-cli.json 文件。
   • 在 Angular 6 中，更改 angular.json 文件。
   • 或者，运行 ng config defaults.styleExt=scss。如果这导致错误，请使用 ng config Schematics.@schematics/angular:component.styleext scss.

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

   • 更改 styles.css 和组件 CSS 文件（例如， app/app.component.css) 到 styles.scss 和相应的组件 SCSS 文件。

3. 更新 Angular.json （仅适用于 Angular 6 ）：

   • 修改apps[0].styles中的文件扩展名angular.json.

4. 将组件指向新样式文件：

   • 将组件定义中的 styleUrls 属性更改为匹配新的SCSS文件

未来项目的解决方案

1. 在项目创建过程中设置样式扩展：

   • 使用创建新项目时ng new，指定 --style=scss。

2. 设置全局默认值：

   • 如果您更喜欢 SCSS作为所有未来项目的默认样式扩展，运行：

   ng config --global defaults.styleExt=scss

以上是使用 SCSS 时如何修复 Angular-CLI 中的'styles.bundle.js:33 Uncaught Error”？的详细内容。更多信息请关注PHP中文网其他相关文章！