1、产生原因为使用了HBuilder X工具开发,style未加scoped.

除了HBuilder X以外其他集成环境几乎都会让新建的.vue文件的style为<style scope></style>,只有HBuilder X例外只是<style></style>。如果你用的是HBuilder X产生了这种问题，先给除了App.vue以外其他组件的<style>加上scope。

2、引入UI改变UI标签的样式时未使用穿刺

如果你使用了Element-UI或者其他UI,然后修改了UI中标签或者组件的样式，本地测试可以看到样式改变，但是打包后就失效了，在你修改UI的style的标签前面加入/deep/(样式穿刺)。如：

 /deep/.el-pagination.is-background .el-pager li:not(.disabled) {background-color: #fff;}/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #409EFF;}

3、使用样式穿刺仍然无法修改element-ui的样式

打开本地测试的网页,在elements里面检查元素,查看要改的标签是否被其他样式替代.比如我这里的el-input__inner.

在其他页面或者其他组件用到同样的el-input__inner,已经对组件进行了修改(具体哪次修改被应用要看谁最后渲染和优先级).然后就可以找到所有修改这个标签的代码,根据渲染顺序和优先级来解决样式无法改变的问题.

4、因为使用选择器不准确而导致样式不变

首先展示一个案例:

可以看出我改变了element-ui中这个格子的高度，而没有改变格子中小图标的line-height，所以小图标不再上下居中。按F12查看后发现小图标的属性是这些，选择器是el-input__icon:

但是无论我们是强制!important还是使用/deep/都无法改变里面的内容，让小图标上下居中

最后我们看html中使用element-ui的层级关系

发现这个小图标是出现在el-select里面的。所以我们应该这样改css：

修改成功：

5、css位置错误

最近又发现了上述四种方法都不能改变样式的情况了。最后发现是css位置写错了。

这里那uniapp举例:

这是从f12中找到的class名。

<template><view><uni-collapse><uni-collapse-item title="订单详情" show-animation="true"><view class="key">职位名称</view><view class="key">订单金额</view><view class="key">订单负责人</view></uni-collapse-item></uni-collapse>   </view>
</template><script>import config from '../../config.js'export default{name:"bottom",}
</script><style>
/* 改变折叠栏打开颜色 */
.uni-collapse-cell--open{background-color: pink !important;
}
</style>

但是样式就是不变，然后我把style中的代码写进了父组件中,却可以改变样式。

<template><view><!-- 头部内容 --><top-bar :option='option' :taskDetail="taskDetail" :status="status"/><!-- 中间的日期 --><date :option='option' :taskDetail="taskDetail"/><!-- 详细信息 --><bottom :option='option' :taskDetail='taskDetail'/></view>
</template><script>import topBar from '../../../components/task/topBar.vue'import date from '../../../components/task/date.vue'import bottom from '../../../components/task/bottom.vue'import config from '../../../config.js'export default {components:{topBar,date,bottom},}
</script><style>
html,body{background-color: rgba(242,242,244);
}.uni-collapse-cell--open{background-color:#ffffff !important;
}
</style>

所以要看看自己css写的是不是子组件。如果上述四种方法不行，就写到父组件中试试。（很神奇）

总结：查看f12后找到对应选择器后再看层级关系，寻找对应层级关系的选择器再改变样式。

vue使用element-ui打包后与本地测试样式不同问题，改变element-ui原有样式方法相关推荐

vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
vue项目使用webpack打包后,图片不显示
1.问题及解决原因 vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来. 查看控制台也没有报错. 错误原因是Webpack打包之 ...
在vue项目中webpack打包后字体不生效
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
vue cli 4.x打包后如何部署到tomcat服务器上
使用npm run build打包好dist后,不能直接打开里面的index.html,否则页面是一片空白 ================================= 这时候我们就需要用服务器 ...
vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
vue打包后dist目录直接打开index资源路径错误和css样式背景图路径问题
config/index.js build: {assetsPublicPath: './' } build/utils.js function generateLoaders (options) { ...
vue 路由history模式打包部署 The requested URL * was not found on this server. 的解决方法
apache开启rewrite_module模块, 在项目根目录创建.htaccess文件,文件内容如下 <IfModule mod_rewrite.c> Options +Follo ...
element 修改分页样式_vue想改变element分页样式
我想要把左边靠左右边pager靠右 .el-pagination .btn-next { background: center center no-repeat #fff; background-s ...
解决vue打包后静态资源路径错误的问题
vue项目完成的最后一步就是打包部署上线,但是打包部署的过程往往不是那么一帆风顺的,现将遇到问题和解决方案记录如下. 图片路径问题起因: 页面中引入资源的方式往往有如下几种 * HTML标签中直接引 ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...

vue使用element-ui打包后与本地测试样式不同问题，改变element-ui原有样式方法