时间:2021-05-18
今天遇到scoped内部的scss设置无效,解决办法如下:
/deep/
<style scoped lang="scss">.position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent; visibility: visible !important; } }}补充知识:【vue scoped 样式修改 】框架或插件组件样式更改及/deep/ 警告
前言
在做vue项目的时候,很多人应该已经碰到在vue 组件中,style 局部修改样式更改不了
<!-- 这个是 B 组件 --><template> <div> <h1 class="my">我是B组件</h1> </div></template><!-- A组件 --><template> <div class="boxA"> <A/> </div></template><script> import A from './a' export default { name: 'index', components:{ A } }</script><style scoped> .boxA /deep/ .my { color:red; }</style>修改 vue 插件或者 框架内组件使用
语法: .自己定义的类名 /deep/ .组件内的类名 { }
看下图:
修改组件样式三种方式
以下例子以 vux 来弄。 /deep/ 和 >>> 在vue中会自动生成选择器的选择属性,你在页面中,会看到控制台中的会有 [data-v-xxxxxx] 的。
注意:在谷歌中,也有这个 /deep/ 中间选择器,但是谷歌放弃这个,如果在你控制台出现下面的图片的警告,证明你写错了,多写了 /deep/ https://ponents: { Step, StepItem, XButton, XHr }}</script><style scoped> .box-out >>> .xxxxx组件样式类 { color: red; }</style>
方法三:使用全局样式表(不推荐)
前面两种方式是都是局部的(推荐),也是可以通过全局样式表改,当然记得在外面添加命名空间(不懂css 的命名空间的话,自行百度)。这个推不推荐的得看个人。希望能够根据业务需求进行增加修改。
<!-- 情况下,引入全局得样式,或者是直接在 app.vue 文件中写全局得。下面是在全局得app.vue中写 --><template> <div id="app"> <router-view/> </div></template><script>export default { name: 'App'}</script><style> .box-out .xxxxx组件样式类 { color: red; }</style>另外说点其他技巧
如果在浏览器中,看到当前的 vue组件属性 [data-v-xxxxxx] 的话,那么可以直接拿过来使用,碧如下面:
以上这篇解决vue scoped scss 无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下:scoped可以实现style只作用于当前的.vue文件.user{color:#3
【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/d
【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/d
本文主要介绍了Vue+scss白天和夜间模式切换功能的实现方法,分享给大家,具体如下:效果图图片被压缩了不够清晰。安装Scss注:若安装失败可以考虑使用cnpm
遇到的坑整个一个下午我都在解决uni-app中使用scss的坑,首先说一下我的问题,在用scss时一直不能使用@mixin,然后百度各种办法调试:代码写法问题(