1. 程式人生 > >vue+webpack+element打包後線上樣式不一樣

vue+webpack+element打包後線上樣式不一樣

修改elementui樣式不能加scoped,否則無效,修改完後線上的樣式卻與本地不一樣,原因是樣式的引入順序決定了打包順序:

import 'element-ui/lib/theme-chalk/index.css' // element樣式

import '@/assets/css/reset.css' // 全域性或重置樣式

import App from './App' // App元件樣式

import router from './router' // 路由元件樣式

       以上打包過程,先對elementui外掛樣式打包,再對全域性樣式打包,如果全域性樣式中有同名的類,則會覆蓋掉elementui中的樣式,就是說如果你在全域性樣式中修改了elementui的樣式,你需要把全域性樣式檔案的引入放在element樣式後

;之後的App樣式打包如果有前面引入的樣式檔案同名的類,則會覆蓋掉之前的樣式,router元件也是如此。

所以在引入樣式表時,為了避免打包時互相覆蓋,需要scoped來限制樣式作用範圍,如果你在元件中修改element樣式,則不能用scoped,所以此時要注意樣式檔案的引入順序。如有錯誤歡迎指正!