MeteorJSスタイラス付き角4コンポーネントには、

Question

が含まれています。新しいMeteorJSプロジェクトでは、Angular 4コンポーネントをうれしく書いています。流星とスタイラスでは、main.stylですべてのスタイラスファイルをインポートして、一時ビルドフォルダのmerged-stylesheets.cssに変換するのが一般的だと思います。

これは問題なく動作します。しかし、コンポーネントを簡単に再利用できるようにするためには、コンポーネントタイプスクリプトファイルとテンプレートを使用してスタイラスファイルを作成する必要があります。しかし、私はexponleのためのWebpackを使用しているときに私がCSSファイルでできるように、コンポーネントファイルにスタイラスファイルをインポートすることはできません。

main.stylではなく、コンポーネントファイル自体にファイルをグローバルにインポートしないでください。

Answer 1

@Component({ 
    selector: 'app-input-form-example', 
    templateUrl: './input-form-example.component.html', 
    styleUrls: ['./input-form-example.component.css'] 
}) 

使用 "styleUrls" または "のスタイル：[]"

Answer 2

私はあなたが唯一のビューのカプセル化を使用してコンポーネントファイルにあなたのスタイルを制限することができると思います。

カプセル化を表示すると、コンポーネント内で定義されたテンプレートとスタイルがアプリケーション全体に影響を与えるかどうか、またはその逆になります。 - メインHTMLからスタイルは コンポーネントに伝播

1. Emulated（デフォルト）：アンギュラは3つのカプセル化戦略を提供します。このコンポーネントの@Componentデコレータ で定義されたスタイルは、このコンポーネントにのみ適用されます。
2. Native - メインHTMLのスタイルはコンポーネントに伝播しません。 このコンポーネントの@Componentデコレータで定義されているスタイルの範囲は、 です。
3. None - コンポーネントのスタイルがメインHTMLに戻って伝播し、 がページのすべてのコンポーネントに表示されます。アプリケーションに「なし」コンポーネントと「ネイティブ」コンポーネントがあるアプリケーションは、 に注意してください。カプセル化なしの コンポーネントはすべて、ネイティブカプセル化を使用するすべてのコンポーネントで、そのスタイルを に複製します。

@Component（{
// ...

カプセル：ViewEncapsulation.None、

スタイル：[

// ...
] }）

http://plnkr.co/edit/E5Hb6B5dRN0llz3JuO57?p=preview

これがあなたを助けてくれることを願っています:)