vue引入css文件导致全局污染的问题
更新时间：2022年10月22日 09:39:01 作者：四月_h
这篇文章主要介绍了vue引入css文件导致全局污染的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
引入css文件导致全局污染
1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式
<style scoped></style>
2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式
所以可以通过一下方法引入，则不会影响其他组件的页面样式
<style src="文件路径"></style>
vue避免全局样式污染的正确做法
说明问题：
样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。
解决方案
1.避免造成全局污染，每个vue页面必须加上scoped
<style lang="scss" scoped>
.app-container {
flex: 1;
padding: 15px;
box-sizing: border-box;
background: #fafafa;
</style>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";
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
最近在做一个文件夹管理的功能，要实现一个树状的拖拽文件夹面板，里面包含两种元素，文件夹以及文件，这篇文章主要介绍了使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理 ,需要的朋友可以参考下2023-09-09
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了详解win7 cmd执行vue不是内部命令的解决方法的相关资料,这里提供了解决问题的详细步骤，具有一定的参考价值，需要的朋友可以参考下2017-07-07
这篇文章主要介绍了vue全局环境变量和模式的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue-cli 配置资源引用的绝对路径的问题，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
之前在网上看到《蓝色拼图》这款小游戏，作者是用jquery写的。下面通过本文给大家分享基于vue.js编写蓝色拼图小游戏，一起看看实现代码吧2017-03-03
今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了Vuejs 组件——props数据传递的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了vue+element下拉列表默认值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了el-table实现转置表格的示例代码(行列互换),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
最新评论