vue 避免全局样式污染的正确做法

2024-06-27 03:56| 来源: 网络整理| 查看: 265

说明问题：样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。解决方案：

1.避免造成全局污染，每个vue页面必须加上scoped

.app-container { flex: 1; padding: 15px; box-sizing: border-box; background: #fafafa;

2.如果要修改element ui里面的底层样式，需要修改的页面加上::v-deep

::v-deep { .el-input, .el-select { display: inline-block; width: 240px; } .radioGroup { width: 240px; } }

3.如果所有的页面都复用使用main.js引入public.scss,具体的代码在这个scss里面写

import '@/assets/styles/public.scss' // global css

4.如果几个页面复用，那么在styles文件夹，里面创建个独立的scss，复用的代码写在这个文件里面。

@import "~@/assets/styles/apply.scss";

后续有内容继续更新，订阅后如有问题，可以直接联系作者，看个人资料的vx

【本文地址】

今日新闻