P
P
postya2020-12-29 16:23:30
Sass
postya, 2020-12-29 16:23:30

How to use Sass in Vue 3?

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?

5feb2da1a469c431422582.jpeg

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey delphinpro, 2020-12-29
@delphinpro

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

S
Swert, 2020-12-29
@swert-tech

poke

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question