(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？

爱被打了一巴掌 2022-05-16 11:48 21阅读 0赞

**问题：** (javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？**描述:**

在开发模式模式下，写的覆盖样式都有效，打包后就无效，请问下是什么原因?  
main.js里的css加载顺序  
![20171219004634_2812.jpg][]

开发模式下  
![20171219004634_4843.jpg][]

![20171219004634_7343.jpg][]

打包后在浏览器查看  
![20171219004635_0000.jpg][]

--------------------

**解决方案1:**

你的问题就是css权重问题 如果相同权重可能存在引入顺序问题

简单粗暴解决办法   
1： 如果是单页面 写入index.html里面   
2：直接修改源码的css 很简单~~~  
3：加个！important

**解决方案2:**

你看下main.js中引入的顺序，是否和下面一样：

import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue'

如果相反，那么element-ui的样式会覆盖自定义的样式。

**解决方案3:**

在vue-cli中开发模式下，css样式是用js打到head中的style标签里的

![20171219004635_2343.jpg][]

而生产环境的css是用`extract-text-webpack-plugin`生成css文件引入的

![20171219004636_6250.jpg][]

这其中的样式优先级是不一样的。一般多写一个选择器增加下优先级就没问题了。

以上介绍了“ (javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？”的问题解答，希望对有需要的网友有所帮助。

[20171219004634_2812.jpg]: http://image.codes51.com/Article/image/20171219/20171219004634_2812.jpg
[20171219004634_4843.jpg]: http://image.codes51.com/Article/image/20171219/20171219004634_4843.jpg
[20171219004634_7343.jpg]: http://image.codes51.com/Article/image/20171219/20171219004634_7343.jpg
[20171219004635_0000.jpg]: http://image.codes51.com/Article/image/20171219/20171219004635_0000.jpg
[20171219004635_2343.jpg]: http://image.codes51.com/Article/image/20171219/20171219004635_2343.jpg
[20171219004636_6250.jpg]: http://image.codes51.com/Article/image/20171219/20171219004636_6250.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP的优势是什么？学了后有什么用？

![f2d69b6cdfa65024f4b51ff32c1051e1.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

古城微笑少年丶/ 2024年03月30日 18:01/ 0 赞/ 86 阅读

相关 VUE项目打包后样式变了

一般是多个vue组件有相同的类名，导致样式相互影响 dev和bulid引用css文件的方式不同解决办法 ![在这里插入图片描述][watermark_type_Zm

柔光的暖阳◎/ 2023年10月06日 13:24/ 0 赞/ 21 阅读

相关 vue+elementui项目打包后样式变化问题

博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法：

傷城~/ 2023年08月17日 16:49/ 0 赞/ 138 阅读

相关修改Element-ui组件的样式无效？

框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？ 1，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的s

缺乏、安全感/ 2023年06月24日 04:47/ 0 赞/ 220 阅读

相关覆盖element.style样式的解决方法

在日常开发中,有时会出现样式被 element.style覆盖，如下图 ![在这里插入图片描述][20200714162942263.png] 最快速的解决方法就是在想要的

你的名字/ 2023年02月26日 06:23/ 0 赞/ 14 阅读

相关 css添加scoped后的样式无效问题

css添加scoped后会编译出版本号 ![在这里插入图片描述][20201228181658245.png] 如果在添加scoped的style中更改UI组件库中的组

淩亂°似流年/ 2022年12月31日 06:18/ 0 赞/ 257 阅读

相关 (javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？

问题： (javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？描述: 在开发模式模式下，写的覆盖样式都有效，打包后就无效，请问下是什么原

爱被打了一巴掌/ 2022年05月16日 11:48/ 0 赞/ 22 阅读

相关 Vue项目打包后，样式顺序出错

> 一，问题描述 1.1 问题情况在本地测试时，css样式是没有问题的，但是当这个vue项目打包之后，第三方的插件的样式竟然覆盖了我自己写的样式。

忘是亡心i/ 2022年04月17日 03:08/ 0 赞/ 651 阅读

相关 vue+element ui 项目打包后运行index.html访问不了?

1. `config文件夹下index.js文件中build 改成assetsPublicPath: './',` 2. `build文件夹下webpack.prod.co

水深无声/ 2022年01月22日 07:43/ 0 赞/ 711 阅读

相关求大神解决一下，这是什么原因？？

java.sql.SQLIntegrityConstraintViolationException: ORA-00001: 违反唯一约束条件 (SYSTEM.PK\_B2B\_

以你之姓@/ 2021年11月22日 04:56/ 0 赞/ 241 阅读