增加body选择器解决VUE打包后对ElementUI自定义CSS失效问题

最新推荐文章于 2024-05-11 15:19:42 发布

ceyowa

最新推荐文章于 2024-05-11 15:19:42 发布

阅读量614

点赞数

分类专栏： VUE 文章标签： vue.js elementui css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/ceyowa/article/details/122487778

版权

在Vue项目中，自定义的CSS样式在开发环境有效，但在打包后对ElementUI的.el-input__inner设置失效。尝试将CSS文件提前引入、使用!important和增加#app选择器等方式均未能完全解决问题。最终通过增加body选择器，解决了ElementUI的Dialog和Popover在append-to-body模式下样式覆盖无效的问题。

摘要由CSDN通过智能技术生成

VUE打包后对ElementUI自定义CSS失效

问题描述：
解决方案：
参考

问题描述：

项目针对所有.el-input__inner设置了height与line-height来限制高度，在dev开发环境，一切正常，但打包发布后发现失效了

dev环境的效果，以及浏览器的css顺序：
在这里插入图片描述

生产环境的效果以及css顺序：

main.js代码：

import Vue from 'vue';
import ElementUI

最低0.47元/天解锁文章

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
增加body选择器解决VUE打包后对ElementUI自定义CSS失效问题

项目场景：Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题问题描述：main.js代码：import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import './assets/style/common.css'import App from './App.vue';其中common.css的.el-input__inne
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。