ホームページ > 記事 > ウェブフロントエンド > Angular で SCSS をサポートする方法の詳細な説明
SCSS は Sass 3 で導入された新しい構文です。その構文は CSS3 と完全に互換性があり、Sass の強力な機能を継承しています。つまり、標準の CSS3 スタイルシートはすべて、同じセマンティクスを持つ有効な SCSS ファイルです。さらに、SCSS は、ほとんどの CSS ハック (一部の CSS トリック) や、古い IE フィルター構文などのブラウザー固有の構文も認識できます。
SCSS は CSS の拡張であるため、CSS で適切に動作するすべてのコードは SCSS でも適切に動作します。言い換えれば、Sass ユーザーは Sass 拡張機能がどのように機能するかを理解するだけで、SCSS を完全に理解できます。変数、親参照、ディレクティブなどの拡張機能のほとんどは一貫しています。唯一の違いは、SCSS ではスタイルをモジュール化するために、改行やインデントの代わりにセミコロンや中括弧を使用する必要があることです
, 通常はSCSSとSASSを使用します。では、Angular プロジェクトで SCSS または SASS をサポートするにはどうすればよいでしょうか?次の 2 つの方法が紹介されます:
プロジェクト作成時に指定
現在のプロジェクトを変更
1. プロジェクト作成時に指定
指定したディレクトリで実行: ng new myProject – style=scss
注: ここでは、Angular の CLI を使用してプロジェクトを作成します。
SASSを指定したい場合は、scssをsassに置き換えてください。
2. 現在のプロジェクトを変更します
angular-cli.json ファイルを変更する必要があります:
デフォルトの styleExt 値を scss に設定します
"defaults": { "styleExt": "scss", "component": {} }これコンポーネント myComponent などのコマンドがファイルを生成するとき、デフォルトのサフィックスは scss です
"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ],注: 忘れないでくださいstyle.css ファイルのサフィックスを変更します。
angularcli css プロジェクトを scss プロジェクトに変換します
方法 1:
ng new My_New_Project --style=scss
方法 2:
"defaults": { "styleExt": "scss", } "styles": [ "styles.scss" ],2. src ディレクトリにファイル _variables.scss を追加します
@import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap';:
以上がAngular で SCSS をサポートする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。