Как использовать внешнюю область действия s css in Vue

Question

Я строю проект на Vue -nuxt. Я хочу использовать внешний S CSS только для этого компонента.

<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

Вы можете импортировать файлы s css в тегах стиля и назначить им область видимости. Как ниже:

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