web-dev-qa-db-ja.com

Angular2モジュールレベルのスタイルシート

私は sass を使用してモジュール構造でWebサイトをデザインしていて、（コンポーネントレベルではなく）各モジュールレベルでスタイルシートを定義してインポートするような方法でスタイルシートを編成しますモジュール全体の標準レイアウトを維持するためのすべてのコンポーネント。

これは良いアプローチですか？

はいの場合、CSSをmodule.tsファイルからすべてのコンポーネントにエクスポートする方法はありますか？非常によく似た方法で、providersを使用してサービスを利用できます。これにより、すべてのコンポーネントに個別に同じCSSファイルをインポートする手間が省けます。

cssangularsass
18
Sumit Agarwal

angularアプリケーションに次の構造があるとします。

+-- src
|   +-- app
|   |   +-- customer
|   |   |   +-- customer.scss
|   |   |   +-- customer.module.ts
|   |   +-- product
|   |   |   +-- product.scss
|   |   |   +-- product.module.ts
|   +-- sass
|   |   +-- _common.scss
|   |   +-- app.scss
|   |   +-- project-level-styles.scss

プロジェクトレベルのsassファイルを次のように設定できます。

@import 'common';

// project level classes
@import 'project-level-styles';

// module level classes
@import '../app/customer/customer.scss'
@import '../app/customer/product.scss'

だからこれらのcustomer.scssおよびproduct.scssそのモジュール内の多くのコンポーネント全体に共通のクラスがあります。

コンポーネントレベルではなくスタイルシートを作成し、それをモジュールやプロジェクトディレクトリ内などの別の場所に配置する場合、angularがこれらのスタイルを処理する方法が異なることに注意してください。

角度コンポーネントスタイル

Angularはコンポーネントスタイルをコンポーネントにバンドルすることができ、通常のスタイルシートよりもモジュール化されたデザインを可能にします。コンポーネントのスタイルに配置したセレクターは、そのコンポーネントのテンプレート内でのみ適用されます。

したがって、コンポーネントstyleUrls配列に関連付けられていないスタイルシートは、サイト内の任意の要素に適用できることに注意してください（具体性を使用しない場合）。それはそのモジュールにのみ適用されるわけではないので、これはすべての状況の解決策とはならないかもしれませんが、これは私のモジュールのために行うことです。そのモジュールの要素...

コンポーネントvsグローバル

私のアプリケーションでは、私のcustomerModuleにcustomerComponentというルートコンポーネントがあり、そのhtmlに次のクラスを持つルート要素があります。

customer-container

だから私のcustomer.scss次のように、すべてのスタイルを付加できます。

.customer-container .info-heading {
  font-size: 15px; color: #333;
}

.customer-container .section-divider {
  margin-top: 1em; border-top: 1px solid #dfdfdf;
}

これで、自分のスタイルが他のプロジェクトコンポーネントに影響を及ぼさないようにするために、ある程度の具体性を実現できます。

4
Eric Bishard

これは良いアプローチですか？

その主観。 Angularモジュールは、アプリケーションを機能のまとまりのあるブロックに編成するのに役立ちます。異なるブロックの機能に異なるスタイルが必要でしょうか？ほとんどありません。

CSSをmodule.tsファイルからすべてのコンポーネントにエクスポートする方法はありますか？.

いいえ。コンポーネントレベルでのみサポートされます。回避策は、すべてのモジュールコンポーネントによって参照される単一のcssファイルを持つことです。次に、CSSをモジュール化してコンポーネントレベルで使用することをお勧めします。

2
jkumaranc

はい。間違いなくアプローチは、コンポーネントごとに異なるスタイルシートを持つことです。でもAngular CLIは同じアプローチに従っています。あなたは見て、実際に試すことができます： [〜＃〜] link [〜＃〜]

これは良いアプローチですか？

はい、これはAngular app。

はいの場合、CSSをmodule.tsファイルからすべてのコンポーネントにエクスポートする方法はありますか。

デフォルトではAngular CLIはモジュールのスタイルシートを提供せず、それも理にかなっています。モジュールレベルでスタイルシートが必要な理由は？コンポーネントレベルのスタイルシートでコンポーネントに関連するスタイルを追加できます。プロジェクトレベルで1つのスタイルシートを作成して、プロジェクトのすべての一般的なスタイルを追加できるようにする必要があります。

0
Tavish Aggarwal