解决解决vue scoped scss 无效的问题无效的问题
主要介绍了解决vue scoped scss 无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
今天遇到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>
/* 使用 scoped 更改的组件样式。 */
/*
此处只是举个栗子使用,没有经过验证。很多人会下面这摸写,但是发现改变不了B组件的样式,其实是 scoped 局部的,所以不能。
.boxA .my {
color:red;
}
*/
.boxA /deep/ .my {
color:red;
}
</style>
修改修改 vue 插件或者插件或者 框架内组件使用框架内组件使用
语法: .自己定义的类名 /deep/ .组件内的类名 { /* 代码块 */ }
看下图:
修改组件样式三种方式修改组件样式三种方式
以下例子以 vux 来弄。 /deep/ 和 >>> 在vue中会自动生成选择器的选择属性,你在页面中,会看到控制台中的会有 [data-v-xxxxxx] 的。
注意:在谷歌中,也有这个 /deep/ 中间选择器,但是谷歌放弃这个,如果在你控制台出现下面的图片的警告,证明你写错了,多写了
/deep/ https://www.chromestatus.com/features/4964279606312960
vue /deep/ 警告警告
评论0
最新资源