歯列矯正4サスコンパイルの問題

Question

角度がコンポーネントのために正確にコンパイルされないか、または期待どおりにならないようです。

/* Works well */ 
.container { 
    .header { 
     margin-top: 20px; 
    } 
} 
.container { 
    .header { 
     background-color: black; 
    } 
} 

をしかし、私は、その後headerコンポーネントを生成した場合、これは動作しません何らかの理由で繰り返しセレクタがありheader.component.scssにスタイルを追加します。このコードはapp.component.scssに適しています！

/* Doesn't work */ 
.container { 
    .header { 
     padding: 15px; 
    } 
} 

はちょうどそれが角フレームワークcorrecltyによって認識される刚性私は、このようなSCSSのコードを書くべきではないことを私に教えていません。 I'amは何か間違っ:)

は、私が見ることができる

Answer 1

が、私はあなたがview-encapsulation

1. ネイティブビューのカプセル化の問題に直面していると思います ブラウザのネイティブシャドウDOM 実装を使用してをやっている場合かを説明します（シャドウDOMをMDNサイトに追加して）、シャドウ DOMをコンポーネントのホスト要素にアタッチし、コンポーネント をそのシャドウDOM内に配置します。コンポーネントのスタイルは、シャドウDOM内に に含まれています。

2. エミュレートビューカプセル化（デフォルト）前処理（名前変更）によって シャドウDOMの挙動 有効範囲コンポーネントのビューのCSSにCSSコードをエミュレートします。

3. Noneは、View Encapsulationを行わないことを意味します。 Angularは、グローバルスタイルに のCSSを追加します。前に説明した有効範囲のルール、隔離、および の保護は適用されません。これは基本的に、コンポーネントのスタイルをHTMLに貼り付けるのと同じです（ ）。

encapsulation: ViewEncapsulation.Native