Vue使用@import 引入样式文件全局污染、使用scoped失效问题

最新推荐文章于 2024-08-16 14:38:17 发布
最新推荐文章于 2024-08-16 14:38:17 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoutlaw/article/details/134715891
版权

scoped
在组件中的style使用@import方式引入外部css，发现引入的css会污染到其他地方。即所谓的样式全局污染。不管加不加scoped都一样。

<style lang="scss" scoped>
    @import url("/style/index.scss") 
<style>

上面这种情况即时加入了scoped也无效，样式一样会污染到其他地方。

正确写法:

<style lang="scss"  src="/style/index.scss"  scoped><style>

zhougl996
关注
专栏目录
.vue文件 加scoped 样式不起作用的解决方法
08-27
本篇文章主要介绍了.vue文件 加scoped 样式不起作用的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深度解析为什么vue组件中添加scoped后某些样式不生效？给出解决办法
孙少的博客
11-08 3460
深度解析为什么vue组件中添加scoped后某些样式不生效？给出解决办法
前端CSS加上scoped后，第三方组件样式不生效的解决方案
最新发布
m0_46893049的博客
08-16 195
给第三方组件样式加 /deep/
vue 使用@import引入样式文件scoped无效造成全局样式污染
m0_73202019的博客
10-12 2155
样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。4.如果几个页面复用，那么在styles文件夹，里面创建个独立的scss，复用的代码写在这个文件里面。1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式。2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式。
import 引入样式污染全局
qq_45311650的博客
10-26 247
今天项目样式突然出问题了，然后排查问题，查看被修改的样式，但是当前页面并没有引入这个样式所在的文件，也是感到很奇怪，上网一查才知道，因此，这种引用方式是全局的，从而引起全局污染，要想引用可以放到style里边。
.vue文件 加scoped 样式不起作用
weixin_33842328的博客
05-28 2322
浅谈关于.vue文件中的style的scoped属性 注意：scoped作用：使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。 1、在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。但是要慎用，因为在我们需要...
Vue中import 引入样式文件污染问题，手动测试过几乎所有情况
weixin_54495706的博客
04-21 1307
只有当lang='css'的时候，这两种引入方式都会污染，必须通过标签内引入才可以当lang='scss'的时候（less我没测，我估计跟scss同理，我实际项目都是用less这样引入局部样式）// 这种不会全局污染！！！// 这种会全局污染。
解决vue+elementui项目打包后样式变化问题
10-15
确保在Vue组件中使用`<style scoped>`时，排除ElementUI的样式文件，或者在`vue-loader`配置中为ElementUI的CSS开启全局作用域。 4. **浏览器兼容性** 需要检查项目是否针对所有目标浏览器进行了充分的兼容性测试...
vue+element项目全局注册el-pagination分页组件和el-upload上传组件并使用
JCat的博客
05-13 1708
为什么我要写这个博客？因为记录一下平时怎么偷懒写代码~~不然怕忘了；其实主要为了记录全局注册组件的方法，在项目中就不用单页面调用了，需要的地方直接用，整理了一下vue+element中常用的分页组件封装和上传组件封装；
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3246
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1340
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
Taro踩坑记录(VUE多端同构)
前端彭于晏的博客
11-27 3231
文章目录全局变量全局方法Taro自定义navBarweb-view自定义tabbar坑 全局变量 VUEX global utils新建一个global.js const globalData = {}; export const setGlobalData = (key, val) => { globalData[key] = val; } export const getGlobalData = (key) => { return globalData[key]; } 全局方法
vue css scoped 失效
qq_42177787的博客
07-07 887
Vue中style在scope模式下无效 正常情况：（无效情况） <style lang="scss" scoped> .el-table__body tr:last-child { font-weight: bold; } </style> 解决方案： 加上 /deep/ <style lang="scss" scoped> /deep/ .el-table__body tr:last-child { font-weight: bold; } &lt
Vue 引入样式Scoped不起错用，解决方案
天马3798
05-28 2901
一、Vue 引入样式Scoped不起错用 出现环境：在vue组件中使用了scoped，发现手写的标签样式起作用，但是第三方的组件标签并没有起作用 　原因： 　　1. 先搞清楚scoped的布局实现 　　　　在style上加上scoped后 会对 style里面加了样式的标签 每个加上一个 像这样的一个属性 　　　　data-v-4686dc05　　 　　　　组件内的样式只会对带有这个标签的dom元素生效，因此加上scoped后，组件内的样式不会影响组件外。 官方文档 　　2. scoped
VUE项目CSS样式穿透，轻松解决element-puls样式不生效的问题
zs_ms的博客
05-31 1016
再找到你需要样式穿透的选择器如上图的.el-upload-list--picture-card，在需要样式穿透的选择器上加上deep。我们在编辑器上书写的标签，都添加了一个唯一标识符data-v-xxxx(因为scoped),然后样式匹配的时候都是根据这个标识符去匹配，有这个标识符的标签，样式能够直接修改，没有的情况下，我们看看是什么情况。这时候不难看出给el-upload-list--picture-card这个类名匹配了唯一标识符，浏览器渲染的标签并没有这个标记，所以样式不生效。
vue2 scss样式使用 scoped竟然会导致伪元素失效
qq_38233172的博客
07-06 485
修改方式在元素标签前增加::deep。
@import 引入less文件，scoped失效问题
weixin_43907110的博客
02-21 621
转换成用src 引入。
vue scoped @import
05-26
如果你想在`<style scoped>`中引入其他样式文件，可以使用`@import`语法。例如，如果你想引入一个名为`variables.scss`的Sass变量文件，可以这样写： ``` <style scoped lang="scss"> @import "@/styles/variables...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值