ホームページ  >  記事  >  ウェブフロントエンド  >  Angular で SCSS をサポートする方法の詳細な説明

Angular で SCSS をサポートする方法の詳細な説明

小云云
小云云オリジナル
2017-12-19 16:49:031768ブラウズ

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. プロジェクト作成時に指定

  2. 現在のプロジェクトを変更

1. プロジェクト作成時に指定

指定したディレクトリで実行: ng new myProject – style=scss

注: ここでは、Angular の CLI を使用してプロジェクトを作成します。

SASSを指定したい場合は、scssをsassに置き換えてください。

2. 現在のプロジェクトを変更します

angular-cli.json ファイルを変更する必要があります:

デフォルトの styleExt 値を scss に設定します


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

これコンポーネント myComponent などのコマンドがファイルを生成するとき、デフォルトのサフィックスは scss です


アプリのスタイルで、styles.css をstyles.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:

追加すると、デフォルトで scss になります


ng new My_New_Project --style=scss

方法 2:

1 、modify.angular-cli .json 構成ファイル:



"defaults": {
   "styleExt": "scss",
}
"styles": [
    "styles.scss"
   ],

2. src ディレクトリにファイル _variables.scss を追加します


3. style.scss ファイルの構成は次のとおりです:



@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

:


CSS および Sass (SCSS) 開発仕様

SCSS モバイル ページ マスク レイヤー効果の実装と一般的な問題の解決策

SCSS code_html/css_WEB-ITnose を記述するときに従うべき原則

以上がAngular で SCSS をサポートする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。