vue+elementui 打包后部分样式不生效问题

vue+elementui 前端项目通过 npm run build 打包成静态文件，放到后端项目 resources\static下 ,运行后发现部分自己在组件里修改过的样式没有生效。

原因

main.js 中的引入顺序决定了打包后css的顺序，如果先引入router,后引入第三方组件的话,第三方组件样式可能就会将组件内的样式覆盖。

解决

调整引入顺序,先引入第三方组件，再引入router，就能实现组件样式在第三方样式之后渲染

代码简单展示

/* 优先引入第三方组件 */
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'				/* 优先引入 */
import 'element-ui/lib/theme-chalk/index.css'	/* 优先引入 */
import router from './router' //引入路由配置
import store from './store' //引入 Vuex 状态管理

Vue.use(ElementUI)