角2のコンポーネントのスタイルが、node_modulesからのCSSのインポートを解決しない

Question

Angular Component Stylesのドキュメントに基づいて、node_modulesの下にあるスタイルシートをインポートしようとしていました。すなわち：

test.component.css：

@import '~@angular/material/core/theming/all-theme.css';

コンポーネントが定義される：ページを閲覧するとき

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'test.component.html', 
    styleUrls: ['test.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class TestComponent { 
} 

は残念ながら、それは/〜@角度ということに来ますmaterial/core/theming/all-theme.cssが見つかりません。

このプロジェクトはAngular-Cliを使用して設定されました。

私はスタイルでコピーして、その方法で参照することができますが、私はむしろライブラリの依存関係を分離したままにしたいと思います。あなたはノードモジュールフォルダから任意のスタイルシートを含める場合

Answer 1

..あなただけの.angular-cli.jsonにそれを追加する必要があります。また

"styles": [ 
    "../node_modules/bootstrap/scss/bootstrap.scss" 
] 

あなたがされるまでencapsulation:ViewEncapsulation.Noneを追加する必要はありませんいくつかのサードパーティのプラグインを使用して動的にHTMLを作成するか、ランダムなCSSを追加します。

常にあなたの.angular-cli.json

Answer 2

問題は、ファイル拡張子であるに含まれているグローバルなCSSを使用することができます。 cssを使用していますが、他の場所からのファイルのインポートをサポートしていないため、拡張子をscssに変更することができます。これで、node_modulesからファイルをインポートできます。