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