如何在 SCSS 中使用 /deep/？

Posted 2023-02-22

【中文标题】如何在 SCSS 中使用 /deep/？

【英文标题】：How can I use /deep/ in SCSS?

【发布时间】：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">吗？

是的，你是对的

【参考方案1】：

已更新。

<style scoped lang="scss">

::v-deep .frame 


</style>