vue的样式污染问题（scoped）

最新推荐文章于 2024-01-09 11:42:16 发布
最新推荐文章于 2024-01-09 11:42:16 发布
阅读量624 收藏 1
点赞数
分类专栏： vue 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang_yang_ok/article/details/117431021
版权

scope设计的初衷就是让样式变得不可修改。是让有scoped的组件样式不会污染其他，而不是防止被污染。

scoped原理是会在元素上添加唯一的属性（data-v-x形式），再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到限制作用域的目的。（权重问题）

但是真的好多坑……

目前自我感觉最好用的方法是在外层dom上添加一个唯一的class，但是这样又很麻烦（感觉像是手动实现模块化），还有什么更好的方法吗？

yang_yang_ok
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 避免全局样式污染的正确做法
weixin_42066070的博客
05-23 5584
说明问题：样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。 解决方案： 1.避免造成全局污染，每个vue页面必须加上scoped <style lang="scss" scoped> .app-container { flex: 1; padding: 15px; box-sizing: border-box; b
vue 使用@import引入样式文件scoped无效造成全局样式污染
m0_73202019的博客
10-12 1744
样式全局污染产生的bug，会影响到其他页面原有的样式，导致每个页面的样式互相冲突，如果写的代码造成了全局样式污染，导致别人的页面每个地方都要去写自定义页面的代码，导致工作量巨大，严重的话，领导会让你当场辞职。4.如果几个页面复用，那么在styles文件夹，里面创建个独立的scss，复用的代码写在这个文件里面。1.写在单组件的style里面css样式，如果标签内不加scoped可能会影响其他组件的样式。2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式。
vue项目中样式污染的解决办法
lld20的博客
05-11 2671
关于vue项目中样式污染的解决办法有两种只不过第二种要在第一种的基础上使用 1.css方法 通过在style 中加上 <style scoped> 2.less 的用法 依赖一个插件 sass-loader 和第一个组合的用 2.1首先要下载相对于的插件 他有两个插件要同时使用 在终端输入 npm install sass-loader@"^10.2.1" --save npm install node-sass@"^4.14.1" --save 在style中直接使用
问题六：vue使用scoped引入外部样式还是造成样式污染
qq_45279574的博客
06-28 1028
1.使用@import引入外部样式 就算加scoped，如果还是有一样的类名还是会造成样式污染 原因 @import引入文件并不是直接将文件中的代码引入到使用的文件中来，而是发起一个请求，获得相应的资源，这个时候是没有scoped的 解决办法 <style src="./style.css" scoped></style> ...
如何解决vue的样式污染
weixin_35748962的博客
01-06 1568
有几种方法可以解决 Vue 中的样式污染问题： 使用 CSS Modules。CSS Modules 允许你将组件的样式定义在组件内部，并使用类似于 JavaScript 模块的方式导入样式。这样，每个组件的样式就只能在组件内部使用，因此不会发生样式污染。 使用 scoped 属性。如果你的项目不使用 CSS Modules，也可以在组件的样式表中使用 scoped 属性。scoped 属性会...
Vue组件中import css时scoped会失效
DDDHL_的博客
01-26 2284
问题 在组件中通过import css 文件时，即使加了scoped还是会变成全局样式，从而影响全局组件的样式。 解决办法 在组件style标签中通过src引入 此时标签style中的样式会失效，所有的样式也放到css文件中就可以了 ...
解决vue scoped scss 无效的问题
10-14
在Vue.js开发中，我们经常使用`scoped`属性来实现组件的样式隔离，确保组件的CSS样式只影响该组件本身，避免全局样式污染。然而，当遇到`scoped scss`无效的问题时，开发者可能会遇到一些困扰。本文将详细介绍如何...
Vue中的scoped实现原理及穿透方法
08-27
scoped是Vue中的一个特殊属性，可以将样式限制在当前组件内，避免样式污染。scoped的实现原理是通过PostCSS转译实现的。在转译过程中，PostCSS会为组件中的所有DOM添加一个独一无二的动态属性，然后在CSS选择器中...
vue组件中的样式属性scoped实例详解
10-17
当 `style` 标签带有 `scoped` 属性时，这标志着其中的 CSS 样式仅应用于当前组件的元素，避免样式冲突和污染其他组件。 **Scoped CSS 规范** Scoped CSS 是一种 Web 组件的样式隔离机制，确保组件的 CSS 只对其...
.vue文件 加scoped 样式不起作用的解决方法
08-27
scoped 属性的作用是使得样式私有化（模块化），不对全局造成污染。在 Vue 组件中，添加 scoped 属性的样式只属于当前组件，不会影响其他组件。scoped 属性的实现机理是通过给 HTML 的 DOM 节点增加一个不重复的 ...
Vue 组件间的样式冲突污染
12-12
，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过 style 标签插入头部，影响全局，交叉污染 ...
vue中scoped的样式污染处理
前端小白
08-13 1498
scoped详解，scoped原理，vue中css样式污染
vue项目css中修改子组件样式又不会造成全局污染的方法
qq_40610279的博客
10-23 2058
vue项目css中修改子组件样式又不会造成全局污染的方法 我们在日常开发过程中，经常会遇到需要修改子组件样式的需求，这个时候我们通常会想到把样式写在不加scoped的style标签中： 但是使用了这种方法后，我们会发现从这个页面跳到另一个也使用了同样组件的页面后，另一个页面的样式会被同步修改，这样就不符合我们最初的预期了。 这个时候，我们又会想到另一个办法，就是在这个样式的外面包一层class，比如这个子组件有一个class为parent-style的div或别的容器，我们可以在这个class里面对子组件
Vue中的scoped和scoped穿透
光脚丫思考的专栏
09-07 2万+
文章摘自：https://segmentfault.com/a/1190000015932467 一、什么是scoped 在Vue文件中的style标签上有一个特殊的属性：scoped。当一个style标签拥有scoped属性时候，它的CSS样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。 二、scoped实现原理 Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码: .
踩坑：1.样式污染 2.父子组件样式互相影响
最新发布
xiuxialala的博客
01-09 1089
并不是直接引入css代码到页面，而是发起新的不带scoped的请求获得样式资源；CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的。2.目的：父组件样式影响多个子组件，实现代码复用，但是不泄露污染到别的组件。都使用了scoped属性，但是子组件的根组件样式受到父组件的样式影响。原因：vue的单文件组件是通过。应采用：src引入方式。问题：父子两个组件的。
Vue 组件间的样式污染
weixin_33851604的博客
08-30 800
一、污染是如何产生的？ 得益于 Vue-loader，在 Vue 中可以使用类似于 Web Component 的组件化写法,&lt;template&gt;&lt;/template&gt;&lt;style&gt;&lt;/style&gt;&lt;script&gt;&lt;/script&gt;，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天生隔离...
Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案
热门推荐
渣渣兔子的博客
05-11 3万+
。。。
vue中style加入scoped影响
03-16
Vue中使用scoped属性来限制样式的作用域，只对当前组件的元素生效，不会影响到其他组件的样式。这样做可以避免样式污染和冲突，提高代码的可维护性和可重用性。但是，scoped样式只对当前组件的元素生效，如果需要对父组件或子组件的元素进行样式控制，需要使用深度选择器或者使用非scoped样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值