Angular で SCSS をサポートする方法-jsチュートリアル-php.cn

Angular で SCSS をサポートする方法

php中世界最好的语言

リリース： 2018-04-14 15:01:45

オリジナル

1451 人が閲覧しました

今回は、Angular で SCSS をサポートする方法と、Angular で SCSS をサポートするための注意点について説明します。実際のケースを見てみましょう。

SCSSの紹介

SCSS は Sass 3 で導入された新しい構文です。その構文は CSS3 と完全に互換性があり、Sass の強力な機能を継承しています。つまり、標準の CSS3 スタイルシートは、同じセマンティクスを持つ有効な SCSS ファイルです。さらに、SCSS はほとんどの CSS ハック (一部の CSS) を認識します。ヒント)、および古い IE フィルター構文などのブラウザー固有の構文。

SCSS は CSS の拡張であるため、CSS で動作するコードはすべて SCSS でも動作します。つまりサスの場合ユーザーが SCSS を完全に理解するには、Sass 拡張機能がどのように機能するかを理解するだけで済みます。変数、親参照、および手順はすべて同じです。唯一の違いは、SCSS では改行とインデントの代わりにセミコロンと中括弧が必要であることです

コンポーネントにスタイルを追加する場合、スタイルの

モジュール化

を目的として、通常は SCSS と SASS を使用します。では、Angular プロジェクトで SCSS または SASS をサポートするにはどうすればよいでしょうか?以下の2通りの方法でご紹介します

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

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

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

SASS を指定する場合は、scss を sass に置き換えるだけです。

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

angular-cli.json ファイルを変更する変更する必要がある主な場所は 2 つあります:

デフォルトの styleExt 値を scss

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

ログイン後にコピー

に設定しますこのように、ng g コンポーネント 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. .angular-cli.json設定ファイル

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

ログイン後にコピー

を変更します 2. _variables.scss ファイルを src ディレクトリに追加します 3. style.scss ファイルの構成は次のとおりです。

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

ログイン後にコピー

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

推奨読書:

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