Angular中使用bootstrap樣式

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。

[email protected]@bootstrap/dist/css/bootstrap.min.css

這個文件里面具有各種css樣式設置。因此,我們嘗試了將這個文件進行了引入。

"styles": [
    "src/styles.css",
    "./node_modules/[email protected]@bootstrap/dist/css/bootstrap.min.css"
]

最后發現bootstrap樣式果然生效了。通過在網上查找發現:原來使用淘寶的cnpm進行??榘滄笆?,最終帶下劃線帶@符號的才是??槲募?,其他的文件夾只是??槲募目旖莘絞?。所以我們如果要引用第三方???,必須引入帶下劃線的???,而不能使用快捷方式。

參考文章:
angular6使用angular-cli構建項目,引用bootstrap樣式無效

posted @ 2019-07-13 12:16  海因斯坦  閱讀(...)  評論(...編輯  收藏