Vue中引入外部css导致的全局污染

问题

当在前端使用vue开发时,给特定页面做好了css并且通过import去导入到当前页面;在编译运行之后发现其他页面也受到影响更改了样式,即"全局污染"。

污染方式

  1. 单组件污染
    单个组件样式,影响到了其他的组件的样式。
    单个组件污染的问题主要表现在< style>样式< /style>上不加 scoped;
    scoped的作用就是让样式只作用于当前组件,如果没有 scoped,那么样式就有可能影响其他组件。

  2. 多组件污染
    多个组件在会共用一套CSS代码时,就会造成多组件污染的情况:
    <style scoped> @import "assets/css/common.css"; </style>
    这种方式也会造成全局污染的情况;但是已经加了scoped,最后无效的原因是**"@import"** ,原因如下:
    @import并不是直接引入css代码到页面,而是发起新的不带scoped的请求获得样式资源;因此,这种引用方式是全局的,从而引起全局污染。

    解决办法

    在VUE中,页面是被允许添加多个Style、Script的,所以可以再添加一个Style通过src的方式去获取样式资源就能解决样式污染问题:

    复制代码
    <style src="@/assets/css/yours.css"  scoped>
    </style>
相关推荐
ma771 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月3 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang4 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻6 分钟前
前端面试十一之TS
前端
摆烂为不摆烂6 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead18 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00121 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
水果里面有苹果24 分钟前
20-C#构造函数--虚方法
java·前端·c#
Zachery Pole24 分钟前
BootStrap
前端·bootstrap·html