首页 > 技术文章 > vue发布后css样式失效的解决方法

brisk 2022-04-26 15:29 原文

问题描述:前端框架是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)

推荐阅读