问题: (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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐