Vue：可以将带有深度选择器的 scss 文件导入到组件的范围样式中吗？

Question

我想知道是否可以将带有深度选择器的 vue 组件的作用域 scss 分离到另一个文件中并将其重新导入？

例子：

// Main.vue
<template>
<div id="main">
  <h1>Title</h1>
  <span>Text</span>
</div>
</template>

<style lang="scss" scoped>
#main::v-deep {
  &>h1 {
    font-size: 10rem;
  }
  &>span {
    font-size: 5rem;
  }
}
</style>

我能否以某种方式实现这一目标：

// Main.vue

...
<style lang="scss" scoped>
@import url('./Main.scss');
</style>

// Main.scss

#main::v-deep {
  &>h1 {
    font-size: 10rem;
  }
  &>span {
    font-size: 5rem;
  }
}

没有将此样式应用于项目中其他任何地方可能具有 id/class="main" 的组件？主要只限于此组件？

Answer 1

您可以使用:deep() { @import './Main.scss' }导入整个 scss 文件，它也适用于您的子组件。