如何在 Vue 中使用外部范围的 scss

Question

我正在构建一个项目Vue-nuxt。我想SCSS仅对该组件使用外部作用域。

<template>
    <div class="card">
        <h3>{{ heading }}</h3>
        <p>{{ para }}</p>
    </div>
</template>
    
<script>
    import './../assets/css/card.scss'
    
    export default {
      props: {
        heading: String,
        para: String
      }
    }
</script>

我怎样才能做到这一点？

Answer 1

您可以在样式标签中导入 scss 文件并为其分配范围。就像下面这样：

<style lang="scss" scoped>
@import "sample.scss";
</style>