如何在 Vue 3 中导入作用域 CSS？

Question

有谁知道如何在 Vue 3 中导入范围 CSS 文件？

我尝试将代码包含在脚本标记中（如下所示），但它只包含全局的 CSS。然后我尝试将它添加到 style 标签的 src 属性中，这有效，但它忽略了 style 标签中的样式（也见下文）。

脚本标签包含

<script>
import '@/assets/sass/styles.sass'
export default {   
...

样式标签包含

<style lang="sass" src="@/assets/sass/styles.sass" scoped>
/* wrapper style ignored if I include src */
#wrapper   
...

Answer 1

好的，发布问题后就能弄明白了。对于遇到此问题的任何其他人，您只需在样式标签中调用 import 即可，它将保持作用域状态。下面的示例...

<style lang="sass" scoped>
import '@/assets/sass/styles.sass'
/* wrapper is now recognized */
#wrapper   
...

How do I import scoped CSS in Vue 3?