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,所以此时要注意样式文件的引入顺序。如有错误欢迎指正!

 

你可能感兴趣的:(vue+webpack+element打包后线上样式不一样)