1. 程式人生 > >啟動angular專案時,樣式有問題

啟動angular專案時,樣式有問題

angular6使用angular-cli構建的專案,啟動時引用bootstrap樣式無效。

前言:昨天在公司升級把專案從angular4 升級到 angular6,很順利,今天趁著雙休日,升級下家裡本本的專案,確保家裡和公司環境一樣,以便日後維護專案方便。(我有一篇部落格是專門介紹升級angular-cli,這裡不做介紹)

問題來了:升級還算順利,當我ng serve 時,出問題了。

最直觀就是樣式有問題。

首先定位到是哪個樣式有問題,簡單一看:是專案中的bootstrap樣式沒有引用上。如果跟我是同問題請繼續往下看:

開始找原因:

1.bootstrap樣式的引用是在angular.json中配置,先檢查路徑配置是否有問題,到node_modules下看是否存在引用的檔案。

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

     我的是這樣配置的,路徑也是存在的,為什麼引用不上呢?其他的報錯也沒有,奇怪中...

2.重點來了:有一個問題很奇怪,在node_modules 中 發現有兩個跟bootstrap 相關的資料夾,如下圖:

      

於是把引用的地址改成

"styles": [ "src/styles.css", "node_modules/

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

發現bootstrap樣式引用上了。

3.是不是很開心,接下來 說一下原因:

   首先: 我是用cnpm install命令安裝的模組,家裡網實在太爛,大家知道 cnpm 淘寶映象嘛

   原來使用淘寶的npm映象cnpm,使用cnpm install命令安裝模組時,下載的帶下劃線,帶@符號的才是檔案的真身,      bootstrap資料夾只是真身的快捷方式。 

記錄此問題,希望能幫助到和我有同問題的人以及自己做一個記錄。