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

2024-02-01 约 511 字预计阅读 2 分钟

我们在进行前端开发的时候，会用到各种各样的UI库，比如vue的element-UI库，react的antd库，又比如说是Vant库，在使用这些库的时候，难免会自定义一些样式，又或者说是修改一些样式。在之前的文章中我也说了如何自定义或者修改UI库的样式：

。

但是这样修改的话，打包过后会有样式污染。

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>

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

目录