私のAngular 2コンポーネントでは、共通のスタイルシートをインポートするのにstyleUrlsを使用していますが、このコンポーネントに固有に追加する1つのルールに対して全く新しいスタイルシートを作成したくありません。AngularコンポーネントでstyleとstyleUrlの両方を使用できますか？
stylesも定義できますか？したがって、私のコンポーネントでは、stylesとstyleUrlsの両方を宣言していますが、動作するようには見えません。
これが可能かどうかを確認したかっただけです。
AFAIK、styleとstyleUrlsの両方を一緒に使用することはできません。 stylesまたはstyleUrlsメタデータを設定することにより
を言います。
しかし、あなたの問題のために、私はdocに役立つ何かを見つけた：
あなたはWebPACKのようなモジュールbundlersを使用する場合は、あなたもで外部ファイルからスタイルをロードするスタイル 属性を使用することができますビルド時間。
styles: [require('my.component.css')]、スタイルプロパティを設定していないstyleUrlsプロパティ：あなたは 書き込みをできました。モジュール バンドラはCSS文字列をロードしますが、Angularではロードしません。 Angularでは、バンドルラーがロードされた後にのみ、CSS 文字列が表示されます。 Angularに対しては、 が手作業でスタイル配列を書いたかのようです。この の方法でCSSを読み込む方法については、モジュールバンドラのドキュメントを参照してください。
この方法で、共通のスタイルシートと単一のルールの両方を追加できます。例：
styles: [require('his-common.component.css'), 'h1 { font-weight: normal; }']
私はあなたの答えを何度も読んで、私はまだ2つのスタイルシートまたは1つのインラインと1つのファイルをインポートすることができません...スタイル：[require（ 'my.component.css' ）]はビルド時のもので、OPの場合の通常の宣言との違いは何ですか？ – Vega
これは解決策ではありません。私は、OPから役立つかもしれない文書から役立つ情報を提供しました。例えば、彼は 'スタイル：[require（ 'his-common-stylesheet.com.com.css'）、 'h1 {font-weight：normal; } '} 'にスタイルシートとルールの両方を含めることができます。 「OP事件の通常の宣言との違い」の意味を詳しく説明してください。もしあなたが彼の 'styleUrls'の使い方について話しているのであれば、問題は彼が望んでいない彼の単一のルールのための別のスタイルシートを作らなければならないということです。だから、私がした情報を提供したのです。 – Nehal
ああ！スタイル：[require（ 'his-common.component.css'）、 'h1 {font-weight：normal; } ']は良いものです。知りませんでした。あなたの答えに入れて： – Vega
以前と同じように、スタイルとスタイルシートを組み合わせることはできません。
、あなたのスタイルシートをミックスしたくない場合は、あなたが（最初の何が来るのか、私の頭からの）いくつかの方法があります。
他に特定のスタイルを（彼らはいくつかのように）入れスタイルシートと
styleUrlsん：[ "stylesheet1"、 "stylesheet2"]
使用して外部負荷に（ '！スタイルローダー./../../資産/ stylesheet.css'）が必要です必要に応じて、必要なときに、特定のスタイルのクラスコンポーネントを介してスタイルシートを作成します。
一般的な要素のスタイルをindex.htmlの隣にあるstyles.cssに移動し、特定のスタイルの「フリー」styleURLまたはstyle：に移動します。
多分いくつかの解決策がありますが、それは良いスタートになるはずです。
一般的なスタイルシート？すべてのコンポーネントに共通ですか？ – Vega
@Vega彼は特定のコンポーネントを意味すると思います。スタイルとstyleUrlsの両方を使用して – NuttLoose
ありがとう、NuttLoose。私はすでにそれを理解していた。それは私が知る限り可能ではなく、私はOPがそれをテストしたと思う。私は彼が一般的なスタイルシートで何を持っているのだろうかと疑問に思っていた – Vega