解决用vue框架开发移动端网站，使用vant，打包上线之后，vant样式错乱，修改不了vant样式的问题

问题：
基于vue框架在移动端使用vant，打包上线之后，我发先样式错乱，在本地查看样式是没有问题的，上线之后就发现样式并未按照我写的样式展示。
解决方法：
1.可能是你的样式被其他样式给覆盖了，那么需要提高选择器权重，给样式加 !important （成功率30%） 例如：

.radiogroup .van-rate_item:not(:last-child) {
padding-right: 20px !important;
}

2.因为是vue项目 为了使vue组件之间的样式不互相影响，我们都用了
scoped,所以你在 里这样使用：（这种方法成功率80%）

/deep/.radiogroup /deep/.van-rate_item:not(:last-child) {
padding-right: 20px !important;
}

3.上面两种方法都没效果，我们就需要知道为什么会出现我们更改不了的情况，而别人就可以更改，区别在于别人使用了less或者scss，不会出现样式重名，而我们没有用less或scss，就很容易出现这些莫名其妙又很烦人的问题，所以啊，咱们以后还是学着使用less或者scss吧，学着高级简便一下吧。好了，但是项目已经临近收尾，重头使用less不太科学，那么第三种方法就来了：
3.1 在你的css文件夹里面建立一个less文件，在你专门用来更改那些你“改不动“的vant样式，(前提是安装了less，安装教程，随便在网上搜都有，这里不过多讲述了。)
如图：

3.2 在你使用vant而又改不动的那个页面引入这个样式表

这个问题在上线之后困扰了我很多次，我觉得下次还是使用less写样式吧。一步步踩坑，一步步成长吧。

• 点赞
• 收藏
• 分享
• 文章举报