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 に変更します。他のファイルの css ファイルへの参照も変更することを忘れないでください。 style.css への参照は .angular-cli.json にあります。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

ノード+スウィグを使用してレンダリング

JSを使用して画像を操作し、白黒だけを残す

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