SCSS 使用時に Angular-CLI で「styles.bundle.js:33 Uncaught Error」を修正する方法は?

SCSS で Angular-CLI を使用する際の「styles.bundle.js:33Uncaught Error」エラーのトラブルシューティング

Angular で問題が発生しました。 -CLI がエラー「styles.bundle.js:33Uncaught」をスローするSCSS使用時に「エラー」が発生します。ドキュメントには、ng setdefaults.styleExt scss を実行するとこの問題が解決されると記載されていますが、うまくいきません。この背後にある理由を調査し、包括的な解決策を提供しましょう。

エラーの原因

このエラーは、CLI がまだ CSS ファイルを検索してバンドルしようとしているために発生します。スタイリング。 Angular-CLI は、最初はデフォルトのスタイル拡張子として CSS から始まります。 SCSS を使用しようとする場合、SCSS ファイルを認識して処理するように CLI を設定する必要があります。

既存プロジェクトのソリューション

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. Rename CSS Files to SCSS:

   styles.css およびコンポーネント CSS ファイルを変更する(例: app/app.component.css) を、styles.scss および対応するコンポーネント SCSS ファイルに追加します。

3. Angular.json を更新します (Angular 6 のみ):

   のファイル拡張子を変更しますapps[0].styles in angular.json.

4. コンポーネントを新しいスタイル ファイルにポイントします:

   新しい SCSS ファイルと一致するコンポーネント定義内の styleUrls プロパティnames.

将来のプロジェクトのためのソリューション

1. プロジェクト作成中にスタイル拡張を設定:

   新規プロジェクト作成時ng new を使用して --style=scss を指定します。

2. グローバルデフォルトを設定:

   SCSS を将来のすべてのプロジェクトのデフォルトのスタイル拡張子として使用するには、次を実行します:
   ng config --globaldefaults.styleExt=scss

以上がSCSS 使用時に Angular-CLI で「styles.bundle.js:33 Uncaught Error」を修正する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。