VUE中使用 less/stylus/sass 情况下 修改子类样式。（关键词 样式穿透，样式击穿）

最新推荐文章于 2024-06-21 14:20:42 发布
最新推荐文章于 2024-06-21 14:20:42 发布
阅读量1.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KLS_CSDN/article/details/95045541
版权

在Vue中，当我们引入了第三方的组件库后，在修改第三方组件库样式，在使用了scoped的情况下，有时候修改样式会失效，这时候可以使用特殊的方式使用穿透

1.stylus的样式穿透 使用 >>> 

外层 >>> 第三方组件

样式

2.sass与less的样式穿透 使用/deep/

外层 /deep/第三方组件{

              样式

}

例图：

KLW75
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css样式穿透(深度选择器)
m0_46862838的博客
12-10 1441
大家是不是遇到了这种情况 —> 当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想组件之间的样式覆盖，这时候需要调整它的样式，于是在网页中找到需要改变的样式的类，在浏览器中测试效果很ok，可是当在代码中写，不管怎么都不能改变它的样式。这时就有了 样式穿透 1、stylus的样式穿透 使用 >>> 语法: 外层容器 >>> 组件 { } 备注: 不太推荐使用这种方式,据说有点问题！ & >&g
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
11-19
在Vue CLI 3.0中，使用预处理器如Sass、Less或Stylus来配置全局变量是一项常见的任务，这可以提升CSS代码的可维护性和复用性。Vue CLI在项目初始化时允许你选择预处理器，但即使未选择，内部的webpack配置也能处理...
less与sass的样式穿透
limpid_changli的博客
08-24 740
less /deep/ +类名 sass ::v-deep +类名
【前端】[vue3] [uni-app] 组件样式击穿：deep
最新发布
Timeguys的专栏
06-21 614
vue3 进行组件的样式击穿。
关于样式穿透和less、sass
bbt953的博客
02-23 840
/* 之前写h5端的时候，用的sass，样式穿透用/deep/死都不生效 现在写pc端，用的less，样式穿透又死了，不肯生效 我终于知道了，如果样式用的sass,样式穿透就要用 ::v-deep 如果样式用的less，样式穿透就要用 /deep/ */ ...
JavaScript中的样式穿透
Asgfcsdn的博客
02-20 596
在前端的项目搭建中往往会用到很多组件以及 vue 框架的使用，这是就会催生出央视无法覆盖的问题，此时就需要进行样式穿透来覆盖掉组件或者框架中的原有样式。
Stylus - Scoped & Scoped 穿透
牧码的博客
02-11 2526
什么是 Scoped？ 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。 Scoped 实现原理 Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前...
解决vue中使用less/sass及使用中遇到无效的问题
01-18
在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。 先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象： { test: /\.less$/, ...
Vue2.0设置全局样式(less/sass和css)
01-21
为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步：在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue...
样式穿透
碉堡飞哥的博客
07-18 1874
// 使用 css 时可以用 >>> 进行样式穿透 .test-wrapper >>> .ant-select { font-size: 16px; } // 使用 scss, less 时，可以用 /deep/ 进行样式穿透 .test-wrapper /deep/ .ant-select { font-size: 16px; } // less CSS mo...
sass、stylus 样式穿透问题
furong_lzz的博客
03-10 798
sass 下载: npm install sass-loader node-sass --save 2 <style scoped lang='sass'></style> 3，修改组件的样式 sass样式穿透 父元素样式 /deep/ 子元素 stylus 下载: npm install stylus stylus-loader --save 2 <style scoped lang='stylus'></style> 3，修
sass和less，优秀的前端样式预处理器
大浪淘沙
08-30 460
身为切图界的一员，恐怕说在前端界打滚了一段日子的你，会缓慢地发现，如今的css编写一经不行满足自己的效力。假若有更敏捷的框架，让你的css更锋利和更容易复用和保护，那该多好啊。很明显，这个早已经不是什么稀奇事，sass和less便是这么2个很出色的形状预办理器，能让你的效率急迅普及。接下来就谈谈它们。          1.样式预处理器的定义     样式预处理器，简单地来精确就
vue父组件控制子组件样式
yy869949908的博客
11-16 1297
vue父组件控制子组件样式 vue组件控制样式 存在scoped 属性：只在当前组件中生效（给组件内的标签加哈希自定义属性） <style scoped lang="less"> .body-bg { background: red; } </style> 不存在scoped 属性：会在整个项目中生效 <style lang="less"> .body-bg { background: red; } </style> 父组件控制
单独修改组件库样式/样式穿透/深度选择器/scoped作用
TKY666的博客
11-09 4340
Ant Design of Vue、Element UI、Vant等各种组件库固然好用，但官方给定的样式却不符合自家ui的设计风格，我们想要修改却又无从下手，改了却又产生连锁反应，所有页面都会受影响。在实际项目开发中或在面试中常会遇到如何单独修改当前页面单个组件样式，并且不影响当前页面其他组件样式。解决方案：一、修改组件库样式方法首先来介绍此事件的主角 --- 深度选择器。
不同的CSS预处理器的穿透（less，sass，stylus）
m0_61840359的博客
11-14 290
这也是我在项目中遇到的问题当时的预处理器是stylus 我使用 /deep/ ::v-deep发现修改的样式并不能生效，最后发现stylus预处理器的样式穿透是 >>> 所以就对这几个预处理器的穿透做了总结。
sass与less的简单基本总结
冰封大海
06-24 520
1.拓展名 less的文件拓展名是xxx.less sass的拓展名是xxx.scss(Sassy CSS)或xxx.sass(Indented Sass缩进格式) 2.变量 sass中的变量以$开头，例： $width: 12rem; #main:{ width:$width; } less中的变量以@开头，例： @width:12rem; #main:{...
sass
qq_26144233的博客
01-09 181
1.变量 1-2. 变量引用; （1）凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。 （2）scss中变量存在作用域，在不同{}中变量作用域不同。 （3）可以在一个变量中引用另一个变量。 $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected { border: 1
less继承
knwceas
05-04 717
less中： child{ &:extend(.father) } 继承： 子类（ child） 与 父类（.father） 即 继承 与 被继承 继承结果： 父类，子类{ ... } .inner{ &:extend(.juzhong); //这里 & 相当于 .inner,用于伪类选择器 } ...
Sass混合器、继承(0725)
weixin_71439967的博客
07-25 134
Sass中也可实现继承类似面向对象思想子类继承父类，sass可以继承多个父类这个”父类“可以是类，id标签状态等。Sass中的混合器类似于js的函数，将一段代码定义成混合器以实现代码的重用。调用混合器@includeminName。声明混合器@mixinmixName。继承语法@extendname。混合器分为无参有参有默认值。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值