Angular2 webpack：ブートストラップをインポートする方法

Question

私はangular2-webpack-starterを使ってプロジェクトをビルドしています。私はブートストラップも使いたいと思います。

をnpm install ng2-bootstrap --saveとしてインストールします。 ng2-bootstrapにはいくつかの指示文しかありませんので、それをスタイルするには "実際の" .cssのブートストラップファイルが必要ですが、その作者は私たちが持っていたと仮定しているようですので、ブートストラップをnpm install bootstrap --saveとしてインストールします。

今、私の質問は、ng2-bootstrapが使用できるように、 "実際の"ブートストラップ.cssファイルをプロジェクトにインポートする方法です。

私はいくつかの方法を試してみました：

1. は私のsrc/assets/cssフォルダにnode_modules/bootstrap/dist/cssフォルダからbootstrap.min.cssファイルをコピーして、自分のindex.htmlに<link href="assets/css/bootstrap.min.css" rel="stylesheet">を追加します。この方法では動作しますが、bootstrap.min.cssファイルはnpmで管理されなくなります。私は将来それを手動で更新する必要があります。

2. 別の試みは、私のapp.component.ts

   のようなスタイルから、それを必要とされています[ （」./ app.style.css '）が必要です、 は' ../../ node_modules /ストラップ/ DIST（必要/css/bootstrap.min.css'） ]、

が、それを解決することはできません。

3. 最後に試してみると、import '@angular/core';と同じようにimport 'bootstrap';〜vendor.browser.tsが追加されています。しかし、どちらも失敗しました。 bootstrapは、簡単にインポートできる@angular2/coreのようなパッケージではないようです。

だから、私の質問は、それがng2-bootstrapと私のプロジェクト内の他のコンポーネントで使用することができ、それはまた、NPMを使用してアップグレードすることができるように、WebPACKの中で/負荷bootstrapをインポートする方法にダウンしています。

Answer 1

import 'bootstrap';は、CSSではなく、ブートストラップのJSエントリポイントを参照します。代わりに番号

import 'bootstrap/assets/css/bootstrap.min.css'; 

で試してください。あなたが使用してCSS-ローダー ダウンロードCSS-ローダーを使用する必要が

Answer 2

は、私は私の角度の2にいくつかのテストを行なったし、それはあなたがあなたのWebPACKにし、いくつかのローダー

npm install css-loader style-loader url-loader file-loader --save-dev 

を必要とする作業します。あなたは、あなたが でそれを使用しようとしているブートストラップファイルを読み込むことができ、この

loaders: [ 
    {test: /\.css$/, loader: ['style-loader', 'css-loader']}, 
    {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, 
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
    {test: /\.html$/, loader: 'raw',exclude: /node_modules/}, 
    {test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'}, 
] 

のようなローダーを使用することができますconfigおよびあなたは

import "bootstrap/dist/css/bootstrap.css"; 
    @Component({ 
     selector: "sg-nav", 
     template: ` 
        <div class="container"></div>`, 
    }) 
    export class NavComponent { 
     public name: string = "MR.Js"; 
    } 

here you can read how it works with css loader

ようなあなたのクラスでブートストラップを使用することができますworking example with bootstrap

Answer 3

多分このようにすることができます

import 'bootstrap'; 
import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css'; 

最初の 'import'は 'bootstrap'モジュールをインポートします（おそらくはbootstrap.jsを参照してください）。

2人目がcssをインポートすることがあります。

とあなたのwebpack.config.jsにあなたはWebPACKのを経由して、それを設定することができ、ローダ

Answer 4

を使用することができますが、これはあなたのwebpack.config.js（CSS-ローダー、スタイル・ローダーにローダーをインストールして追加する必要があります、url-loaders、file-loaders）、次にvendor.tsのbootstrap.min.cssファイルとbootstrapファイルをインポートします。

これはかなり冗長だと思います。 ではなく上記の、あなただけの単純（NPMを使用してなど）をインストールし、あなたのindex.htmlにスクリプト以下の1行（縮小さWebPACKのJSファイル）を追加することができ

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

Answer 5

良い方法があるかもしれません、私はbowerを使って、ng2プロジェクトのcss関連のlibs（例えば、ブートストラップ、font-awesome）を処理しています。そして、NPMと亭をインストール

{ 
    "directory": "src/assets/lib", 
} 

：次のように（例えば）src/assets/lib：

はにファイルを保存するために、あなたの.bowerrcを設定します。

npm install bower --save-dev

そしてあなたがブートストラップを取り付けることができます（あなたはバージョン番号を固定する場合と）あなたのbower.jsonファイルに追加する

bower install bootstrap --save。

このソリューションについての素晴らしい事は亭があなたのためにすべての依存関係を扱うことである（例えば、それは自動的にあなたのlibディレクトリにjqueryのを追加します）

その後、手動ですでにとして、あなたのindex.htmlであなたのリンクを追加することができますやった： <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>

私は.gitignoreへsrc/assets/libフォルダを追加...およびデプロイ/インストールするために、私はbower installを実行します。