ホームページ > 記事 > ウェブフロントエンド > 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 (スタイラス)
ng new my-project --style=scss
"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 サイトの他の関連記事を参照してください。