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

今回は、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通りの方法でご紹介します

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

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

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

指定されたディレクトリで実行します: 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 サイトの他の関連記事を参照してください。