Angular CLI プロジェクトで CSS から SCSS に正常に移行するにはどうすればよいですか?

Angular CLI の CSS から SCSS への移行

Angular CLI は、プロジェクトで SCSS スタイルシートを利用する機能を提供します。ただし、SCSS の実装中に「そのようなファイルまたはディレクトリはありません」というエラーが発生した場合は、特定の手順を実行する必要があります。

デフォルト スタイル拡張のコマンド

ドキュメントに記載されているように、「ng setdefaults.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:

   • 新しいstyles.scssファイルを指すようにangular.jsonファイルの「styles」配列を変更します。

4. コンポーネントの更新参照:

   • 更新された SCSS ファイル名を反映するように、個々のコンポーネント ファイルの "styleUrls" プロパティを調整します。

今後のプロジェクトのデフォルトを設定する

新しいプロジェクトを作成するときは、プロジェクトの作成時にスタイル拡張子を指定できます:

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

すべての新しいプロジェクトのデフォルトのスタイル拡張子をグローバルに設定するには:

ng config --global defaults.styleExt=scss

以上がAngular CLI プロジェクトで CSS から SCSS に正常に移行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。