如何处理前端打包后样式污染问题

如何处理前端打包后样式污染问题

我们在进行前端开发的时候，会用到各种各样的UI库，比如vue的element-UI库，react的antd库，又比如说是Vant库，在使用这些库的时候，难免会自定义一些样式，又或者说是修改一些样式。在之前的文章中我也说了如何自定义或者修改UI库的样式：
https://blog.csdn.net/x_XDGS/article/details/113928529?spm=1001.2014.3001.5501。
但是这样修改的话，打包过后会有样式污染。

我们先来说一说css打包机制吧

css打包机制是这样的
1.通过npm run build进行项目打包，
2.打包后悔出现一个dist文件夹，文件夹里会有img，css，js文件夹
3.所有的css样式都会被压缩到css文件夹里
4.在不同文件中做的相同的css名的操作会合并在一起，比如：

// element-UI里面的uoload上传组件
// 想要自定义上传按钮
<style lang="scss" scoped>
.el-dialog__body {
	width: 200px;
}
</style>

如果在其他地方也用到了上传组件，样式的宽度为300px
这样打包后悔有样式污染。

如何避免打包后样式污染呢？

其实很简单的
就是在你需要修改的样式前面加上一个父标签
比如：

<style lang="scss" scoped>
.uoloadBox{
	.el-dialog__body {
		width: 200px;
	}
}
</style>

在不同的文件中用不同的父标签就是包裹，这样就能有效的避免打包后的样式污染了