Angular中使用bootstrap樣式
Angular中引入bootstrap的方法
方法1：在Angular.json中的styles數組中添加bootstrap路徑
如下所示：
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]
這里需要注意路徑問題，不同Angular版本下，Angular.json的位置可能有所不同，因此對應的路徑也有可能需要作出修改。
方法2:通過在styles.css中使用@import 進行引入。
由於styles.css是整個項目的全局樣式，因此可以在這里通過@import直接引入，也能夠全局生效，這里同樣需要注意路徑問題。
路徑中不需要帶node_modules
@import url('bootstrap/dist/css/bootstrap.min.css')
Angular中引入bootstrap不生效的解決辦法
在進行Angular開發時，使用了bootstrap樣式。發現bootstrap的樣式無法生效。引用方式如下：
在Angular.json中修改styles數組，
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]
仔細檢查路徑后發現沒有問題，但是樣式總是無法生效。查看控制台發現元素沒有bootstrap的樣式。說明bootstrap沒有生效。然后在node_module中查找發現存在兩個跟bootstrap相關的文件，其中一個是我們引用的bootstrap，另外一個是帶下划線和@版本的bootstrap。
_bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css
這個文件里面具有各種css樣式設置。因此，我們嘗試了將這個文件進行了引入。
"styles": [
"src/styles.css",
"./node_modules/_bootstrap@4.3.1@bootstrap/dist/css/bootstrap.min.css"
]
最后發現bootstrap樣式果然生效了。通過在網上查找發現：原來使用淘寶的cnpm進行模塊安裝時，最終帶下划線帶@符號的才是模塊文件，其他的文件夾只是模塊文件的快捷方式。所以我們如果要引用第三方模塊，必須引入帶下划線的模塊，而不能使用快捷方式。