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>
相关推荐
长空任鸟飞_阿康1 分钟前
提示词管理器设计:从需求到用户体验的高效落地逻辑
前端·人工智能·ux
零點壹度ideality9 分钟前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
林希_Rachel_傻希希11 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Komorebi゛12 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket
想要狠赚笔的小燕13 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
用户3521201956019 分钟前
React-router v7(下)
前端
枫,为落叶19 分钟前
【vue】设置时间格式
前端·javascript·vue.js
郝学胜-神的一滴41 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'1 小时前
css`text-wrap:pretty`
前端·css
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js