vue发布后css样式失效的解决方法
问题描述:前端框架是vue,并且采用了element ui库作为默认样式。但是项目上线后发现,某些element ui组件的样式出现了问题,即在项目中重新对这些组件的CSS进行了定义,调式时没问题,上线后这些CSS失效了。
在此记录一下该问题的解决方法。
-- By Brisk
解决办法参考这位Old Fe的博文:
Vue 项目部署出现css样式失效的解决方案 - 老实憨厚的脖子 - 博客园 (cnblogs.com)
检查项目中main.js各组件的引用顺序,确保如下:
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
这样就能解决上述问题。猜测产生这一问题的原因可能是后引用element ui的CSS,造成该库的默认样式覆盖了APP中自定义的样式。
同时,在开发时也要注意,不要在父组件和子组件中同时对某一样式进行定义,也要注意将公用样式和组件的“私有”样式分开(使用scoped)