(javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?描述:
在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因?
main.js里的css加载顺序
开发模式下
打包后在浏览器查看
解决方案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标签里的
而生产环境的css是用extract-text-webpack-plugin
生成css文件引入的
这其中的样式优先级是不一样的。一般多写一个选择器增加下优先级就没问题了。
以上介绍了“ (javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?”的问题解答,希望对有需要的网友有所帮助。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)