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 ステータス コードの問題を解決する方法

vue select コンポーネントを操作および無効にする方法

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