角度成分用のサス構造

Question

私たちのチームは角度ベースの大規模なプロジェクトに取り組んでおり、さまざまなコントロール（ナビゲーション、入力、テキストエリア、テーブル、ボタンなど）用に独立した小さなコンポーネントを作成して、プロジェクト。

この場合、スタイルシートをどのように整理するかはわかりません（今は1つのCSSファイルにコンパイルされているsassを使用しています）。すべてのコンポーネントが独立していて、独自の別のsassファイルを持っている必要がある場合は、異なるベンダーのCSS（たとえばMDLを使用している）のスタイルを使用して、CSSの継承のように整理します。

特定のコンポーネントが独自のディレクトリにある独自のSASSファイルでのみ使用するすべてのCSSを記述すると、さまざまなコンポーネントに多くの重複スタイルが存在します。このような場合に共通の解決法はありますか？

アドバイスをいただきありがとうございます。

Answer 1

私が取り組んでいるプロジェクトでは、コンポーネント内に個々のスタイルシートを使用していましたが、共通のスタイルシートがアプリケーション内にあります。

- app 
    - assets 
     - css 
      main.scss 
      buttons.scss 
      forms.scss 
      grid.scss 
      typography.scss 
     - images 
     - fonts 
    - components 
     - component-a 
      component-a.ts 
      component-a.scss 
     - component-b 
      component-b.ts 
      component-b.scss 

この場合のコンポーネントSASSには、そのコンポーネントのSASSのみを含める必要があります。 （あなたがまだの場合）

それは角度2

Answer 2

にComponent Styles上に読み取るために、それ価値があるだろう、私は一部ににSCSS分割することをお勧めします。

1. 変数の定義は、関数やミックスイン（再利用可能なものはすべて）
2. グローバルですべてのスタイル。このようなフォント・サイズ、形のスタイル、グリッドとしてので、部品

には、アプリケーションのための1つのグローバルスタイルシートを提供し、コンポーネントの特定のスタイルをカプセル化することができますこの方法をカプセル化することができる

コンポーネントの特定のスタイルに。 再利用可能なもの（変数、関数、およびミックスイン）をすべて分離することにより、コンポーネントに含めるコンポーネントscssでのみ使用されるスタイルで使用できます。下記のご意見や調査に基づき

Answer 3

、私たちは一緒に行ったプロジェクトの構造は（我々はまた、MDLを使用している）スタイル組織の面である：

 
- app 
    - assets 
     - css 
      reset.scss 
      helpers.scss (some global styles) 
      mdl.scss (native MDL styles) 
      variables.scss (global variables) 
    - components 
     - component-a 
      component-a.scss (will import component-a-variables.scss here) 
      component-a-variables.scss (variables used only for this component) 
     - component-b 
      component-b.ts 
      component-b.scss (will import component-b-variables.scss here) 
      component-b-variables.scss (variables used only for this component)