如何在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>