前端样式错乱问题

最近公司做的项目，在测试的时候发现构建后线上的样式和自己本地的样式有些不一样，代码都是一样的为什么线上和本地的代码运行出来的样式呈现出不一样的效果，有可能是打包文件时，样式代码打包出的问题。最后发现其实是不同.vue文件中的样式代码互相影响了。

本地以及线上环境页面图

• 线上效果图
• 本地代码效果图

  
  

分析问题

由图中可以初步得出线上环境的modal对话框元素比下拉框option元素拥有更高的堆叠顺序，导致出现图中的样式bug问题。

• 首先解决样式问题

在代码都相同的情况下，导致样式出现不一致，有种可能是打包代码时样式代码错乱，引用到了其他页面的样式代码。而导致出现这种样式问题的css属性可能是z-index属性。所以全局搜索z-index字段发现以下内容

解决方法是在Map.vue文件的css样式代码加上scoped表示样式私有化

小结

在项目开发的时候，样式代码都加上scoped属性，否则可能会影响项目打包后的样式,因为打包时vue cli 3.0会将js和css文件分开打包，才会导致样式在一起打包产生样式混乱问题。所以如果不采用scoped的方法也可以在vue.config.js配置文件中设置css: {extract: false, sourceMap: false}来从根源上解决样式错乱问题；

虽说scoped属性能解决样式混乱问题，但还是建议慎用，因为scoped实现样式模块化的机制时在css标签中添加了一个data属性(如: data-v-2311c06a)然后在编译后的css语句末尾加上当前组建的data属性选择器来私有化样式，这样做的后果是导致css权重加重，如果是组件化开发时，别人调用你的组件将很难修改你的样式。

组件引用一般有几种情况

• 模块一般组件(未添加scoped)引用模块私有组件(添加scoped)

• 模块私有组件引入模块私有组件

       父组件的data标记只会添加在子组件的最外层标签中，所以父组件还是难以修改子组件内         部样式。