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>
相关推荐
我是天龙_绍15 小时前
Lodash 库在前端开发中的重要地位与实用函数实现
前端
LuckySusu15 小时前
【vue篇】Vue 数组响应式揭秘:如何让 push 也能更新视图?
前端·vue.js
LuckySusu15 小时前
【vue篇】Vue 性能优化神器:keep-alive 深度解析与实战指南
前端·vue.js
LuckySusu15 小时前
【vue篇】Vue 核心机制揭秘:为什么组件的 data 必须是函数?
前端·vue.js
LuckySusu16 小时前
【vue篇】Vue 响应式陷阱:动态添加对象属性为何不更新?如何破解?
前端·vue.js
LuckySusu16 小时前
【vue篇】Vue 异步更新之魂:$nextTick 原理与实战全解
前端·vue.js
LuckySusu16 小时前
【vue篇】Vue 条件渲染终极对决:v-if vs v-show 深度解析
前端·vue.js
LuckySusu16 小时前
【vue篇】单页 vs 多页:Vue 应用架构的终极对决
前端·vue.js
LuckySusu16 小时前
【vue篇】Vue 核心指令原理解析:v-if、v-show、v-html 的底层奥秘
前端·vue.js
LuckySusu16 小时前
【vue篇】Vue 进阶指南:如何在自定义组件中完美使用 v-model
前端·vue.js