Angularプロジェクトでscssを使用する手順の詳細な説明

今回は、Angular プロジェクトで scss を使用する手順について詳しく説明します。Angular プロジェクトで scss を使用する際の 注意事項 について、実際のケースを見てみましょう。

はじめに

SCSS は Sass 3 で導入された新しい構文です。その構文は CSS3 と完全に互換性があり、Sass の強力な機能を

継承します。つまり、標準の CSS3 スタイルシートはすべて、同じセマンティクスを持つ有効な SCSS ファイルです。さらに、SCSS は、ほとんどの CSS ハック (一部の CSS トリック) や、古い IE フィルター構文などのブラウザー固有の構文も認識できます。

SCSS は CSS の拡張であるため、CSS で適切に動作するコードはすべて SCSS でも適切に動作します。言い換えれば、Sass ユーザーは Sass 拡張機能がどのように機能するかを理解するだけで、SCSS を完全に理解できます。

変数、親参照、ディレクティブなどのほとんどの拡張機能は同一ですが、唯一の違いは、SCSS では改行やインデントの代わりにセミコロンや中括弧が必要であることです。

Angular CLI は、以下を含むさまざまな CSS 前処理をサポートします。 yl (スタイラス)

デフォルト値はcss。

• Angular には CSS 前処理を指定する 2 つの方法があります。以下の例として scss を取り上げます:

• 新しいプロジェクトの CSS 前処理を指定します

• 新しい Angular プロジェクトでは、--style を使用して CSS 前処理を指定します

  ng new my-project --style=scss

• 既存のプロジェクトの CSS 前処理を指定します

• 既存のプロジェクトでは、CSS 前処理の変更もサポートされています。

.angular-cli.json を表示すると、デフォルトの設定項目に次のようなステートメントがあります:

"defaults": {
 "styleExt": "css",
 "component": {}
}

set コマンドを使用して styleExt を変更します

ng set defaults.styleExt scss

プロジェクトが一律に scss を使用している場合は、プロジェクト内の css ファイルを scss に変更してください。また、他のファイルの

references

も css ファイルに変更してください。 style.css への参照は .angular-cli.json にあります。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

axios が表示されたときに 302 ステータス コードに対処する方法

一部の組み込みコンポーネントの使用方法の詳細な説明

以上がAngularプロジェクトでscssを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。