ホームページ > ウェブフロントエンド > CSSチュートリアル > Angular CLI プロジェクトで CSS から SCSS に正常に移行するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-07 00:03:14
オリジナル
775 人が閲覧しました

How to Successfully Transition from CSS to SCSS in Angular CLI Projects?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート