解决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/ .组件内的类名 { /* 代码块 */ }

看下图：

解决方案：只要在页面中去查找下即可，利用vue渲染后会把所有的，会在控制台能看到

以上这篇解决vue scoped scss 无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。