如何在 SCSS 中使用 /deep/？答案

【问题标题】：How can I use /deep/ in SCSS?如何在 SCSS 中使用 /deep/？
【发布时间】：2021-07-16 04:50:35
【问题描述】：

您好，我们知道如果我们使用<style scoped>，我们可以保护其他元素不受我们的样式影响。如果我们添加动态元素，我们应该使用parent-class /deep/ current-class，但我如何使用 SCSS 来使用它

示例代码[工作]

<template>
  <div class="slider" ref="slider"></div>
</template>
<style scoped>
.slider {
  width: 100%;
  height: 100%;
  background: green;
}
.frame /deep/ .frame{
  width: 100%;
  height: 100%;
  background: blue;
}
</style>
<script>
export default {
  name: "Slider",
  mounted() {
    for (let i = 0; i < 3; i++) {
      let frame = document.createElement("div");
      frame.classList.add("frame");
      this.$refs.slider.appendChild(frame);
    }
  },
};
</script>

有错误

<template>
  <div class="slider" ref="slider"></div>
</template>
<style lang="scss" scoped>
.slider {
  width: 100%;
  height: 100%;
  background: green;
}
.frame /deep/ .frame{
  width: 100%;
  height: 100%;
  background: blue;
}
</style>
<script>
export default {
  name: "Slider",
  mounted() {
    for (let i = 0; i < 3; i++) {
      let frame = document.createElement("div");
      frame.classList.add("frame");
      this.$refs.slider.appendChild(frame);
    }
  },
};
</script>

【问题讨论】：

你说的是<style lang="scss">吗？
是的，你是对的

标签： javascript css vue.js webpack sass

【解决方案1】：

已更新。

<style scoped lang="scss">

::v-deep .frame {
}

</style>

【讨论】：