title: How to use sass extend in vue 3 vite?
body: <p>So I imported bootstrap like so in <code>app.scss</code> for example,</p>
  <pre><code>@import &quot;bootstrap/scss/functions&quot;;
  @import &quot;bootstrap/scss/variables&quot;;
  @import &quot;bootstrap/scss/mixins&quot;;
  @import &quot;bootstrap/scss/bootstrap.scss&quot;;
  </code></pre>
  <p>Now inside a component if I do,</p>
  <pre><code>&lt;style scoped lang=&quot;scss&quot;&gt;
  .text {
    @extend .text-white;
  }
  &lt;/style&gt;
  </code></pre>
  <p>I get the following error,</p>
  <pre><code>[plugin:vite:css] The target selector was not found.
  Use &quot;@extend .text-white !optional&quot; to avoid this error.
    ╷
  8 │   @extend .text-white;
    │   ^^^^^^^^^^^^^^^^^^^
    ╵
    src/components/Navbar.vue 8:3  root stylesheet
  </code></pre>