How to use Sass in Vue 3?

Question

Sass

Project on Vue 3 with Typescript
I can't connect sass, style files are not visible. I need scss files to be visible globally

. What I tried to do:

1. Created a vue.config, js file in the root of the project and added it to it

css: {
    loaderOptions: {
      sass: {
        additionalData: `
            @import "@/assets/scss/styles.scss";
            `
      }
    }
  }

2. Created scss directory in assets and created
fonts.scss, global.sccs, styles/scss, variables.scss files there

3. Imported all scss files in styles.scss file

@import "global";
@import "variables";
@import "fonts";

How to properly use sass in Vue 3 projects?

Answer 1

Variables and mixins are imported into additionalData.
We write styles in styles.scss, import other files (variables and mixins are not required, but will not interfere).
Styles.scss itself is imported at the client entry point (main.js by default, it seems, if without SSR).

Answer 2

poke