鍍金池/ 問答/HTML/ 怎么確保Vue.js開發(fā)和發(fā)布的css定義順序是一致的？

怎么確保Vue.js開發(fā)和發(fā)布的css定義順序是一致的？

怎么確保Vue.js開發(fā)和發(fā)布的css定義順序是一致的？
我在開發(fā)一個(gè)Vue.js項(xiàng)目的時(shí)候，開發(fā)中和發(fā)布之后，發(fā)現(xiàn)css樣式不一致：

圖片描述

圖片描述

請問下，這個(gè)情況是怎么回事呢？

貌似css在webpack打包的時(shí)候，css定義順序不是一致的嗎？

比如：

// dmeo.html
<span class='Color'>Colored Text</span>

// demo.css
.Color {
   color: blue;
}

.Color {
   color: red;
}

這里就需要對css增加權(quán)重，但是如果不增加權(quán)重呢？怎么做到webpack打包的時(shí)候,css定義順序不變？

回答
編輯回答
忠妾

你這思路就錯(cuò)了，想必你是在多個(gè)頁面使用了相同的className,寫了不同的樣式，導(dǎo)致樣式被覆蓋。
解決方法：

  1. 在當(dāng)前.vue文件的style加上scoped；
  2. 在頁面頂級一個(gè)頂級樣式，如：

.top{
    a{},
    b{}
}
2017年7月22日 21:45
編輯回答
女流氓

首先去檢查器里檢查下這個(gè)元素上應(yīng)用的樣式，color 有沒有被覆蓋。
其次順序不會變的，你的 demo.css 想必并不是真的這樣寫的吧- -可能是你引用的順序不太對，再檢查下吧。

2017年10月10日 13:15