webpackを使用してカスタムCSSでブートストラップのCSSを上書きする

Question

私はAngular2アプリケーションを作成しており、スタイリングにはブートストラップを使用しています。私はmodule bundlerとしてwebpackを使用しています。私は、bootstrapライブラリと、vendor.tsのグローバルカスタムスタイルシートを含めました。ここ は私vendor.tsです：

// Angular 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
// RxJS 
import 'rxjs'; 
// Other vendors for example jQuery, Lodash or Bootstrap 

import 'jquery'; 
import 'bootstrap-loader'; 
import 'font-awesome-sass-loader'; 
// You can import js, ts, css, sass, ... 

import '../public/css/styles.css'; 

通常は、HTMLファイルにブートストラップのCSSの後に自分のCSSをリンクする必要があります

<link rel="stylesheet" href="bootstrap.css"> 
<link rel="stylesheet" href="custom.css"> 

あなたとブートストラップのスタイルを上書きする（例えば。）自分のスタイル。どうやってwebpackでやるの？ありがとう。

Answer 1

これは角度2とは関係がありません.cssファイルをindex.htmlで上書きする順に含めることができ、他のプロジェクトと同様に使用することができます。 ただし、コンポーネント固有のスタイルがある場合は、そのコンポーネントに固有のCSSをカプセル化するために、styles/styleUrlsメタデータ属性を持つコンポーネント内で使用することができます。