'How to use external scoped scss in Vue

I'm building a project on Vue-nuxt. I want to use external SCSS scoped to only that component.

<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>

How can I do that?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to use external scoped scss in Vue

Sources

Related Questions