如何將Bootstrap CSS集成到Angular應用程序中

Question

我有兩個類似的非常小的示例集成了Bootstrap CSS的Angular應用程序。一個人的作品和我自己創作的作品不一樣。目前還不清楚它的區別是什麼以及爲什麼它不適用於我的情況。

我的步驟如下：

npm install bootstrap --save 

這將更新package.json，隨後我更新index.html並添加

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

完全同一行中運行的應用程序，但在我創建示例應用程序使用​​它不起作用。

chrome中的Network標籤顯示404。基本上找不到URL http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css。

在Angular應用程序中整合Bootstrap CSS的正確/完整方式是什麼？

Answer 1

看來你正在使用的角度&角CLI

如果是這種情況，那麼你實際上可以添加bootstrap.css文件中.angular-cli.json對應style鍵這樣

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

兩個其他的可能性內陣列在主.css文件使用@import導入此bootstrap.css，或者你可以在主index.js文件需要這一點。

Answer 2

由於您使用的角CLI：

更新您的.angular-cli.json文件，包括引導風格：

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

沒有必要把它列入您的index.html