ローカルBootstrap3をAngularで使用する

Question

Angular cliを使用してAngular 2アプリを作成しました。 index.htmlで

、私はCDN上の3をブートストラップするために参照していますし、それが代わりにCDNからのブートストラップを使用しての、今罰金

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

作品、私は、ローカルコピーを使用したいと思います。だから、私は、NPM

npm install bootstrap@3 

を使用してブートストラップを設置した後、しかし、これは動作しないSRC内にあるindex.htmlファイル内の参照、（node_modulesに平行）

<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

を提供しようとしました私はブラウザのコンソールで以下を参照してください（index.htmlをロードしてください）

誰かがローカルでブートストラップをロードする方法をアドバイスできますか？

PS：私はそれがアルファ

Answer 1

は、あなたの地元のJavaScriptとCSS/SCSS /以下のファイルを参照する必要がありますここには文字列の配列を受け入れる&スタイルのプロパティ（あなたのNPMパッケージへのあなたの相対パス）

スクリプトです。あなたのindex.htmlファイルに作成されますng serveこれらのファイルを実行しているとき

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css", 
    "../node_modules/font-awesome/css/font-awesome.css" 
], 
"scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.js" 
], 

は、ここにあなたのスクリプトを追加します。

Angular-CLIはアプリを構築するのに最適な選択肢です。

Answer 2

にまだあるようあなたのローカルフォルダにCSSファイルをコピーして、..を削除

<link href="/css/bootstrap.min.css" rel="stylesheet"> 

Answer 3

それをロードできるようにする必要がありBootstrap4を使用したくありませんhref属性値から：

href="/node_modules/bootstrap/dist/css/bootstrap.min.css" 

もう一つの提案は、/distを見てみることですwebpackがjsとcssをバンドルしてローダーをバンドルしている場合は、

あなたがcssフォルダが表示された場合、あなたはちょうどする必要があります。

href="/css/bootstrap.min.css" 

それともルートレベルにあるならば、あなただけの唯一のファイルの名前を入れて：

href="/bootstrap.min.css" 

Answer 4

なぜだけではなく、負荷をそれはCSSのローダーとそれ以外のもののようにそれを束ねる？

すべてのバンドリングを行う4つのエントリポイントファイルがあります。そのうちの1つはcss-chunk.jsです。私はwebpackのCSSローダーを介してそこにすべての私のCSSファイルが必要です。 CSS-chunk.jsから

ライン：（ '！！！スタイルローダーCSS-ローダーブートストラップ/ DIST/CSS/bootstrap.css'）

が必要です。 webpack.configから

ローダー：

loaders: [ 
       ..., 
       { 
        test: /\.css$/, 
        loaders: ['to-string-loader', 'css-loader'] 
       }, 
      ], 

すべてがちょうど束ね取得し、あなたは自分のインデックスページでバンドルのCSSファイル含める必要があります：

<script src="css.bundle.js"></script> 

素晴らしい作品

を、私は持っていますいくつかのアプリがこの方法で展開されています。あなたの.angular-cli.jsonファイルで