elementUI项目打包后样式错乱问题解决

最新推荐文章于 2024-05-17 10:31:39 发布
最新推荐文章于 2024-05-17 10:31:39 发布
阅读量3k 收藏 6
点赞数
分类专栏： 总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630688/article/details/101675523
版权

>  npm run dev 时样式完全没有问题，run build之后打包上传服务器之后样式乱了，一脸懵逼~~

 

1.  检查样式发现重置element的样式没有生效，但是检查main.js里面的样式引入顺序没有问题啊？？？

2. 尝试将css引入放入app.vue中，打包后发现依然无效

 

## 解决方案：

 -  element 样式引入要在 router 及app之前，不然打包后的样式会有问题

-  app 引入最好放在所有样式之后

小兔快跑zZ
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue+elementui项目打包后样式变化问题
11-19
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎， 找到了问题所在以及解决办法： main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。 代码如下： main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has bee
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
11-28
单独修改后的样式 出现这样的问题就是可能是bs把这个插件当做手机显示了，也可能是这样插件对bs集成不行 lodop对常规html+css还是不错的，下面丢上bs版的代码 控件对应html+js使用代码 <%@ Control ...
vue使用element-ui打包后与本地测试样式不同问题，改变element-ui原有样式方法
progrmmmm的博客
10-16 4248
1、产生原因为使用了HBuilder X工具开发,style未加scope. 除了HBuilder X以外其他集成环境几乎都会让新建的.vue文件的style为<style scope></style>,只有HBuilder X例外只是<style></style>。如果你用的是HBuilder X产生了这种问题，先给除了App.vue以外其他组件的<style>加上scope。 2、引入UI改变UI标签的样式时未使用穿刺 如果你使用了Ele
Element UI表格组件样式错乱解决
最新发布
qq_52608468的博客
05-17 435
element表格组件被二次封装为A组件，根据业务需求又将A组件二次封装为B组件。此时有一个场景：根据tab栏切换展示不同表格，其中表格仅仅只是表头不一致。所以直接使用B组件，仅传入表头属性值不同。当表头列数不一致时，会出现样式错位现象。
vue+ElementUi打包后样式失效的问题解决
weixin_46147856的博客
07-19 6110
vue+elementui项目打包后,我发现页面样式变成了elementui自带的样式,自己在组件里修改过的样式没有生效。 问题原因: main.js中的引入顺序决定了打包后css的顺序，如果先引入router,后引入第三方组件的话,第三方组件样式可能就会将组件内的样式覆盖。 解决办法: 调整引入顺序,先引入第三方组件，再引入router，就能实现组件样式在第三方样式之后渲染。 代码如下: main.js import Vue from 'vue' import App from './App' impor
使用element ui 的分页功能出现样式混乱
weixin_52940426的博客
09-02 888
很大原因是由于不规范操作，比如说 1.修改页面样式时不使用类名，使用的标签名来修改样式。 2.由于全局样式对组件库的污染，自己可能没有察觉 问题如下图：
vue+webpack+element打包后线上样式不一样
前端知识总结
09-29 8136
修改elementui样式不能加scoped，否则无效，修改完后线上的样式却与本地不一样，原因是样式的引入顺序决定了打包顺序： import 'element-ui/lib/theme-chalk/index.css' // element样式 import '@/assets/css/reset.css' // 全局或重置样式 import App from './App' // App...
解决vue +element 样式打包后错乱问题
adai_zhu的专栏
06-15 1378
项目使用vue 框架 element组件 。打包正式环境后样式错乱了 解决方案 1、修改main.js 中引入element组件的顺序放在最上 2、cha
vue 返回上一页,页面样式错乱的解决
10-15
今天小编就为大家分享一篇vue 返回上一页,页面样式错乱的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Recyclerview由于ViewHolder的复用显示错乱问题解决
07-20
在Android开发中，RecyclerView是一个非常重要的...通过以上分析和实践，可以有效地解决RecyclerView显示错乱的问题，保证用户界面的正常显示。在实际开发中，理解并熟练运用这些技巧，将有助于提升应用的用户体验。
UTF-8 BOM 可能导致样式错乱的解决方法
10-29
utf-8 是一种在web应用中经常使用的一种 unicode 字符的编码方式，使用 utf-8 的好处在于它是一种变长的编码方式，对于 ANSII 码编码长度为1个字节，这样的话在传输大量 ASCII 字符集的网页时，可以大量节约网络带宽...
vue项目element-ui组件自定义样式设置，以及打包build上线后样式失效问题
qq_45880487的博客
10-13 2375
1.我们在用element组件库中的插件，经常感觉他自带的样式不太符合咱们项目的需求，想修改还没效果怎么办？广大网友提供了很多方法，找到最多的解决方法就是样式穿透（/deep/,:v-deep)，我个人试过很多次可能哪里没写对完全没效果，真的很苦恼 这里的解决方法是再写一个style标签，与scoped私有属性标签分开，标签属性可以在网d 这样运行之后样式应该可以改变了，但是要注意新写的style没有scoped，属于全局样式了，所有修改需谨慎 2.然后是打包，打包之后会发现...
解决element-ui分页组件激活样式和页面对不上的问题
想好了再写！
07-12 633
问题描述： 点击页面发送请求，点击确定按钮关闭弹窗并且重置页码为1，再次打开弹窗进来就会有问题，此时数据请求的是第一页的数据，但是页码不在第一页，而是在上一次最后点击的页码那里。如下图：再次进来数据请求的是第一页的数据，但是页码激活样式在第三页.........
vue工程打包上线样式错乱问题
热门推荐
feiyu_may的博客
07-18 1万+
项目开发完成后，执行 npm run build 进行打包，将打包完成的文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？ 长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 main.js样式引入顺序问题 有时候我们发现组件内的样式没有生效，可能是被第三方组件样式...
vue项目中开发版本和发布版本样式不一样
qq_41339169的博客
11-05 853
vue项目中开发版本和发布版本样式不一样 在项目中使用element组件库 引入组件库样式的代码要放在引入路由的前面 安装element组件库并加载样式 import Vue from 'vue' import ElementUI from 'element-ui'' Vue.use(ElementUI) import 'element-ui/lib/theme-chalk/index.css 引入路由 import router from './router' 因为vue-cli会将按照顺序将所有
vue项目打包上线后页面样式与开发页面不一致
朽木自雕的博客
06-10 3804
vue项目打包上线后页面样式与开发页面不一致 原因： 打包的过程会进行优化，导致引入样式文件的顺序发生变化 解决办法： 将自己写的样式文件放在最后面，框架什么的放在前面 注意：每个组件的样式文件记得加上scoped，防止样式冲突 ...
解决前端打包后 线上样式与测试环境样式不一样bug
m0_73267676的博客
05-26 1801
打包后会出现文件夹，文件夹里会有img，css，js文件夹，所有的css样式都会被压缩到css文件夹里，在不同文件中做的相同的css名的操作会合并在一起所以产生了污染，就造成了本地与线上不一致的情况。在两个页面都打开调试台排查bom树检查不一样的地方，首先确定排查方向，线上页面tatle和暂无数据的div发生了并列，所以着重排查这两个div子级父级的dom元素，终于在线上bom样式上发现了猫腻。前天一个功能页面完成了，本地测试一切正常，自己打包上线后线上展示完全与本地展示的不一样。
修改elementui中分页组件el-pagination的样式
kirinlau的专栏
02-22 4282
elementui组件el-pagination分页组件 背景色修改
element组件修改样式 分页器修改样式 ＞＞＞穿透
daddykei的博客
08-02 2944
https://blog.csdn.net/Alex81320/article/details/86234369 vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。 有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名) <style scoped> 外层 >>> 第三方组
vitepress build后样式错乱
04-10
在使用 VitePress 构建后，如果出现样式错乱的情况，可能是由于以下原因导致的： 1. 缓存问题：尝试清除浏览器缓存，然后重新加载页面，看是否解决了样式错乱的问题。 2. 构建配置问题：检查你的 VitePress 构建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值