title: How to use external scoped scss in Vue
body: <p>I'm building a project on <code>Vue-nuxt</code>. I want to use external <code>SCSS</code> scoped to only that component.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div class=&quot;card&quot;&gt;
          &lt;h3&gt;{{ heading }}&lt;/h3&gt;
          &lt;p&gt;{{ para }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
      
  &lt;script&gt;
      import './../assets/css/card.scss'
      
      export default {
        props: {
          heading: String,
          para: String
        }
      }
  &lt;/script&gt;
  </code></pre>
  <p>How can I do that?</p>