再利用性とコンポーネント間のスタイル共有のコンテキストでWebコンポーネントのスタイルを設定するには

Question

ウェブコンポーネント（私の場合は角2コンポーネント）にブランディング（スタイル）を追加する戦略に着きたいと思います。同じ構成要素がページ上で複数回繰り返される可能性があるコンセンサスで。コンポーネント間でスタイルをパッケージ化して抽象化しながら、重複を避けたい。スタイルをコンポーネントにアトミックにする必要があるときに、それを抽象化する必要があるときに、どのようにしてそれをどうやって解決する必要があるのか​​、私はどのようにして解決策に到達しますか？ありがとうございました

Answer 1

私の経験では、特定の領域を扱ういくつかのスタイルファイルを持つことは本当に便利です。私の場合、私はそれらのテンプレートを呼び出しました。これは私のメインプロジェクトの私のmain.scssファイルの例です：

@import 'templates/menu.scss'; 
@import 'templates/forms.scss'; 
@import 'templates/pagination.scss'; 
@import 'templates/general.scss'; 
@import 'templates/type.scss'; 
@import 'templates/labels.scss'; 
@import 'templates/navbar.scss'; 
@import 'templates/sidebar.scss'; 
@import 'templates/buttons.scss'; 
@import 'templates/tables.scss'; 
@import 'templates/panels.scss'; 
@import 'templates/alerts.scss'; 
@import 'templates/loading.scss'; 
@import 'templates/calendar.scss'; 
@import 'templates/comment-input.scss'; 

私はこれをオンデマンドで作成しました。これは、あらゆる種類の再利用可能なコードを作成するようなものです。あなたやチームの何人かが、作成しようとしているものがすでに存在することに気付いたとき。コンポーネントのスタイルから削除し、スコープの広いスタイルファイルに配置する方がよいでしょう。

私たちは5人の開発者のチームであり、本当にうまくいっています。コンポーネントの特定の動作は分離されていますが、共有するビヘイビアは使用するコンポーネントによって使用できます。

私が使っているもう1つのアプローチは、テンプレートファイルをコンポーネントの別のstyleUrlとしてインポートすることだけです。このようにして、私はさらにスタイルのカプセル化を保証します。

具体的な動作をするコンポーネントがありますが、そのコンポーネントにlabels.scssを使用可能にしたいとします。あなたはこれを行うだろう：

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.component.html' 
    styleUrls: ['my-component.component.css', '../shared/styles/labels.css'] 
}) 

私は本当にこの第二のアプローチのように、しかし、プロジェクトは本当に大きなにつれて、あなたは共有スタイルをインポートするときに処理されるいくつかの厄介な相対パスを持つことができます。

こちらがお役に立てば幸いです。