Vue-webpack打包上线后css样式不生效的问题解决

在vue项目中，开发环境的样式没问题。但是webpack打包上线后，样式不生效，本文将讲述如何解决这个问题。

样式穿透

vue项目中style标签有个scoped属性，当有这个属性时，css样式只会作用于当前组件，对其它组件和子组件不会生效。这个属性为了解决样式污染的问题。

但是我们需要父组件的样式也能对子组件生效，怎么办，比如父组件有个class为a,子组件也有a,如果想要只在父组件写一次，我们就可以去掉这个scoped属性。

嗯，这样做在开发环境中也是可以生效的，但是用编译后的dist文件包上线，这个样式在子组件就不生效了。具体为什么不生效，网上也没有很明确的说法。笔者也不敢妄下结论，在此不深究。

样式穿透解决办法

css 有个深度选择器>>>，通过这个选择器，父组件的样式就会作用到子组件上，也可以使用/deep/

样式覆盖

在某些场景，我们可能会重写第三方组件库的样式，此时我们在组件中写上样式就可以，但是打包后也不生效。此时我们可以通过修改引入顺序来解决。

// UI框架 (最先引入)
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

// 路由(因为我们在路由组件中开发，所以最后引入)
import router from './router'

总结

笔者通过以上两个解决办法，解决了线上样式丢失的问题，可能其它场景还有其它办法。以后遇到了，再进行补充。