How to use sass extend in vue 3 vite?

Question

So I imported bootstrap like so in app.scss for example,

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/bootstrap.scss";

Now inside a component if I do,

<style scoped lang="scss">
.text {
  @extend .text-white;
}
</style>

I get the following error,

[plugin:vite:css] The target selector was not found.
Use "@extend .text-white !optional" to avoid this error.
  ╷
8 │   @extend .text-white;
  │   ^^^^^^^^^^^^^^^^^^^
  ╵
  src/components/Navbar.vue 8:3  root stylesheet

Answer 1

Add an option to CSS pre-processors in vite.config.js :

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "bootstrap/scss/bootstrap";`
    }
  }
},

For more info you can check the offical doc at https://vitejs.dev/config/#css-preprocessoroptions