angular-cliとbootstrap 4

Question

私は角度2で私の最初のステップを移動します。特に、私はangular-cli公式ツールを使って新しいプロジェクトを作成します。

私はこの方法で新しいプロジェクト

ng new [my-project-name] 

プロジェクトが正しく作成されましたを作成しました。

その後、私はブートストラップ4をインストールしたいと思います。私はangular-cliページの公式ガイドに従っています。

私はNPMとブートストラップインストール：

npm install bootstrap@next 

と私は私のアンギュラcli.jsonに行を追加します。

"scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/tether/dist/js/tether.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.js" 
], 
"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
], 

Appオブジェクトに。

私はアプリを構築して、サーバーで実行する場合：ng serve

私は、ブートストラップCSSやJavaScriptの基準とindex.htmlをで見つけることはありません。

このファイルのインポートが自動的にindex.htmlに追加されているか、手動で追加する必要があるかどうかわかりません。

Answer 1

このファイルのインポートが自動的にindex.htmlに追加されているか、手動で追加する必要があるかどうかわかりません。

あなた自身で追加する必要があります。

Answer 2

angle.cli.jsonファイルにscriptsおよびstylesエントリを追加すると、それらはグローバルスコープに追加されます。具体的には、scripts.bundle.jsおよびstyles.bundle.jsに追加されます。 index.htmlに追加する必要はありません。あなたは、サービスを停止して再起動した後に行くのが良いはずです。良い尺度のために、angular.cli.jsonを変更した後、npmを再構築します。

Answer 3

は、HTMLファイルに手動で何かを追加する必要があります。それはあなたのために自動的に行われます。

あなたのCSSスタイルがstyles.bundle.cssファイルに追加されます。

はここに理由です。アプリを実行すると、HTMLソースのスタイルシートへのリンクが表示されます：<link href="styles.bundle.css" rel="stylesheet">。ブラウザでstyles.bundle.cssをクリックすると、コンパイルされたすべてのスタイルが表示されます。

もう1つ重要ものです。私はまた、あなたが以下にあなたの角度-cli.jsonファイルにスタイルシートの順序を入れ替える勧め：

"styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.css", 
    "styles.css", 
] 

上記変更の理由は、あなたのファイルがコンパイルされ、あなたが提供するために提供されていることですangular-cli.jsonファイル。だから、もしあなたがbtn-primaryのカスタムスタイルをstyles.cssに書いたのであれば、それは常にbootstrap.cssによって上書きされ、あなたのスタイルがUIには適用されず、あなたはできないでしょう。何がうまくいかないのか理解する。

ファイルの順序を入れ替えると、最初にブートストラップスタイルがロードされ、次にカスタムスタイルがロードされ、ブートストラップのスタイルが独自のスタイルで上書きされます。これはあなたが現在あなたのケースで行う必要がある唯一の修正であり、他のものはあなたの努力なしでスムーズに動作するはずです。