web-dev-qa-db-ja.com

Angular 2-グローバルCSSファイル

Angular 2にグローバルCSSファイルを追加することはできますか？現時点では、同じボタンスタイリングを持つ多くの異なるコンポーネントがありますが、各コンポーネントには、スタイリングを含む独自のCSSファイルがあります。これは変更にイライラさせられます。

Stack Overflowのどこかを読んで、以下を追加します。

import { ViewEncapsulation } from '@angular/core'; //add this

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None            //add this
})

そこで、ルートコンポーネントにViewEncapsulation行を追加し、次にルートアプリCSS（app.component.css）にCSSスタイルを追加し、個々のコンポーネントCSSファイルからCSSスタイルを削除しましたが、機能しませんでした。

グローバルなCSSファイルを追加する方法はありますか？グローバルCSSファイルにアクセスするために、個々のコンポーネントに何かを追加する必要がありますか？

cssangularangular-cli
44
dandev91

メインのhtmlファイルにcssをインポートするだけです。

26
Abraham

src/styles.cssファイルにグローバルスタイルを記述するだけです。 styles.bundle.jsを実行すると、そのファイルはng buildに追加されます。

さらにスタイルファイルを追加する場合は、.angular-cli.json（またはAngular 6+の場合はangular.json）ファイルで追加できます。そのファイルには、デフォルトでstyles.css（またはAngular 6のsrc/styles.css）という単一の項目を持つstylesという配列があります。 .scssファイルを含めることもできます。

SCSSを使用する

SCSSを使用する場合は、src/styles.cssファイルの拡張子を.scssに変更し、.angular-cli.json（または6+ではangular.json）ファイルに変更を反映します。まあ、styles配列のエントリを編集することにより。

AngularがデフォルトでSCSSを使用するようにします

コンポーネントを作成するとき、Angularで.scssの代わりに.cssスタイルファイルを作成する必要があります。方法は次のとおりです。

角度7

Angular 7から開始して、ng new appnameを使用してアプリを作成すると、使用するスタイルシート形式が求められるので、SCSS（ source =）。ここで、Angularを手動で構成してSCSSを使用する必要がなくなりました。

角度6

これをangular.jsonファイルの最後に追加します（ source ）：

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

角度4以下

.angular-cli.jsonファイルの終わりまでにこれを見つけ、styleExtの値をscssに変更します。

"defaults": {
  "styleExt": "css",
  "component": {}
}
70
Parziphal

次を使用できます。

  1. Main.cssを追加します
  2. メインフォルダーでstyles.cssを開きます
  3. この行を追加します（@import 'main.css';）

enter image description here

2
Ahmad Aghazadeh