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

Question

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

私は追加するスタックオーバーフロー上のどこかで読ん

：

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ファイルにアクセスするには、個々のコンポーネントに何かを追加する必要がありますか？

Answer 1

メインのhtmlファイルに単純にcssをインポートすることができます。

Answer 2

今日のアングル4では、src/styles.cssファイルにグローバルスタイルを書いてください。 ng buildを実行すると、そのファイルはstyles.bundle.jsに追加されます。

スタイルファイルは、.angular-cli.jsonファイルのAngular-CLIに登録されています。 stylesという配列がapps配列内にあり、デフォルトでは単一の項目がstyles.css（パスはsrcディレクトリからの相対パス）です。 SCSSを使用する場合は、その項目の拡張子をscssに変更し、src/styles.cssファイルの拡張子も変更します。

あなたが終了することでこれを見つけ、同じファイルで、デフォルトでscssする（たとえばコンポーネントの）将来のスタイルファイルが必要な場合：

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

とscssにstyleExtの値を変更します。