アプリケーション内のcss定義ファイル間のcssクラスの階層と継承

Question

CSSファイルが角型アプリケーションをどのように伝播するのか不思議です。私は最高レベルのstyles.cssを含むsrcフォルダを持っています。そこに定義されているスタイルは、アプリケーション全体に適用されます。その下にapp.component.cssを持つappフォルダがあります。これにはそれぞれ2つのサブコンポーネントalpha.componentとbeta.componentがあり、それぞれ独自のフォルダに入っています（それぞれアルファとベータ）。 alphaには、それぞれcss、html、およびtsファイルで定義された独自のコンポーネントであるγサブフォルダとdeltaサブフォルダがあります。 alpha.component.cssでクラスを定義し、そのクラスをgamma.component.htmlで使用すると、alpha.component.cssのルールは自分のクラスのインスタンスに適用されますか？同様に、app.component.cssでクラスが定義されている場合は、アプリ内のすべてのhtmlファイルに適用されますか？

Answer 1

これまでにCSSで定義したスタイルは、ファイルに属するものだけに適用されます。これは角度でView Encapsulationと呼ばれます。

要素を調べると、.my-nav[_ngcontent-c0]のような奇妙なタグが各コンポーネントクラスに固有の角度で追加されています。どの角度がどのスタイルを適用するかを知っていること。あなたは

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

ViewEncapsulation.Noneは、プロジェクト全体に適用されますコア

そしてsrcフォルダ内のグローバルstyles.cssファイルからインポートする必要があり、この機能を無効にすることができます。この動作はアプリのフォルダ構造とは関係ありません。グローバルスタイルは、あなたがより高い優先順位を持っている、私は最後に私のグローバルCSSを追加している見ることができるようにstyles

"styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "../node_modules/material-design-icons/iconfont/material-icons.css", 
    "styles.css" 
    ] 

下.angular-cli.jsonファイルに追加されます。