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

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后找到对应选择器后再看层级关系，寻找对应层级关系的选择器再改变样式。