[新手坑] 02.Vue開發環境和生產環境樣式不一致的問題

[新手坑] 02.Vue開發環境和生產環境樣式不一致的問題

上次提到做用域問題, 致使樣是不生效, 此次講的是我以前遇到的一個小坑, 稍不留神就完蛋.

前陣子作的一個小項目, 引入了Vant的UI庫, 外加本身寫的不少樣式, 在開發環境下測試完美, 直接就build出來上正式環境, 發現居然有多處樣式未生效的問題! 還好是新項目, 還沒有推廣, 所以除了內部同事測試發現, 沒有形成惡劣影響, 不過之後仍是要注意下, 開發環境看着沒問題, 可是生產環境必定仍是要再過一遍.

那麼爲何會出現這個問題呢? 我下面來作些小的測試觀察一下.

問題現象

在開發環境下, 每一個不一樣塊的style都會被單獨提取插入到頁面的head區域, 而生產出來的的文件是會被合併成一個文件, 在開發環境下, 這些style塊的順序又和生產環境編譯出來的css文件內的順序有差異, 致使咱們在開發環境中, 使用了相同的優先級, 覆蓋原Vant的UI樣式看起來正常, 而在生產後, 順序錯誤致使失效了!

爲了更加方便測試, 我在vue-cli-mobile-study項目建立了一個分支02-build-css-order, 有興趣能夠看看~

原本想在不一樣塊的css中添加註釋以便於更明顯的觀察順序變化, 結果發現生產環境中的註釋被自動忽略了, 嘗試去掉 cssnano插件執行, 發現仍是有部分註釋沒有展現出來, 由於不是很重要, 因此沒有去糾結這塊.

開發環境中的head區域有效的style有5個. 分別是

1. index.html中的css樣式
2. vant的base.css內容
3. 路徑爲./vue-cli-mobile-study/src/assets/styles/_uireset.css內容
4. App.vue的css內容
5. HelloWorld.vue的css內容

而生產出來的卻和這個不一樣, 由於被合併爲1個css文件了, 所以咱們觀察單個css文件的上面4塊的順序

1. index.html中的css樣式
2. App.vue的css內容
3. HelloWorld.vue的css內容
4. vant的base.css內容
5. 路徑爲./vue-cli-mobile-study/src/assets/styles/_uireset.css內容

固然, 其實在有做用域的組件中所包含的樣式順序對項目是沒有影響的, 因此咱們須要關注的是全局引入的樣式順序, 從上面的現象中能夠看出, 除了核心文件index.html, 開發環境下, Vant樣式默認在最前面(Vant其實是Babel那邊導入了), 而其餘樣式則彷佛根據main.js入口的順序, 以及渲染順序來添加到html頭部的; 而生產環境下, 相對詭異.

2018年4月21日補充

今天由於考慮到Vant的中部分reset樣式並無較好的對頁面進行樣式統一, 所以引入 normalize.css, 因而基於上面的測試, 如今擁有 6塊 style. 而 normalize.css在兩種環境下的區別仍是有的~

我將normalize.css直接寫入main.js的頂部進行import, 發現能夠很好的將normalize.css內的樣式放在除了不可控制index.html內樣式以後的首位. 這樣就很棒棒了, 一般咱們會將normalize.css和reset.css優先加載.

問題緣由

我有在GitHub查閱過相關Issues, 也找過StackOverflow相關內容, 不過沒有什麼收穫, 外加Webpack的高級配置方面也不是很熟悉, 所以也就沒有研究出來, 若是有大神能指點一二歡迎留言.

解決方案

在須要覆蓋第三方組件的默認樣式是, 儘可能使用高於第三方組件優先級的css樣式, 以避免出現開發環境和生產環境效果不一樣的狀況.

在本身的組件樣式編寫中, 除了有公共的組件在不一樣頁面的樣式控制下可能須要全局樣式外, 儘可能寫上做用域! 而且必定不要在本身寫的組件內使用全局樣式, 很容易出現順序問題致使開發和生產結果不一致的狀況!