how to use sass using in vuejs3/vite

Question

I starting with vite / vuejs 3

after installing sass with npm install -D sass I tried to add my _variables.js file this to vite.config.js

css: {preprocessorOptions: {scss: {additionalData: `@import" ./src/css/_variables.scss ";`,},},},

din't work!

it also worked in vue.config

css: {
     loaderOptions: {
       sass: {
         sassOptions: {
            prependData: `@import" @ / css / _variables.scss ";`,
         }
       }
     }
   },

after this tried to import the file in main.js import "./css/_variables.scss"

Unfortunately, my components cannot find the variables, where is the error

score 41 · Answer 1 · edited Feb 10 '22 at 19:40

41

Vite is a litte bit different

    import { defineConfig } from 'vite'
    
    export default defineConfig({
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `
              @import "./src/styles/_animations.scss";
              @import "./src/styles/_variables.scss";
              @import "./src/styles/_mixins.scss";
              @import "./src/styles/_helpers.scss";
            `
          }
        }
      }
    })

edited Feb 10 '22 at 19:40

Deiby Rodriguez

43
3

answered Feb 10 '22 at 19:30

Andres Separ

3,144
1
19
17

1

This is the correct answer if you are importing for use in all components, avoiding repeat imports. – MoO Dec 05 '22 at 10:01

score 24 · Accepted Answer · answered Jun 26 '21 at 13:37

24

here is my working setup, got it from the vite docs and with the command yarn add -D sass

// package.json
{
  "dependencies": {
   ...
    "vue": "^3.0.5"
  },
  "devDependencies": {
    ...
    "sass": "^1.32.11",
    "vite": "^2.2.3"
  }
}

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

// App.vue
<template>...</template>
<script>...</script>

<style lang="scss">
@import "./assets/style.scss";
</style>

// style.scss
[data-theme="dark"] {
  --bg-color1: #121416;
  --font-color: #f4f4f4;
}
[data-theme="light"] {
  --bg-color1: #f4f4f4;
  --font-color: #121416;
}
...
body {
  background-color: var(--bg-color1);
  color: var(--font-color);
}

and my vue.config.js is clean - nothing fancy there.

answered Jun 26 '21 at 13:37

wittgenstein

3,670
7
24
41

1

Have you managed to compile any nested SCSS imports? I'm struggling to figure this out myself. Trying to get material components web to work. Seems like there is an issue with the @forward syntax. https://github.com/vitejs/vite/issues/4140 – JStanton Sep 10 '21 at 12:26
2

Have you tried to import your scss files in `main.js`? For me it works to import multiple scss files via `./` there. – wittgenstein Sep 10 '21 at 15:06
Thanks. I was originally doing that myself too. Seems to be a bug with material design. – JStanton Sep 11 '21 at 10:30

score 13 · Answer 3 · answered Mar 22 '22 at 15:22

13

For Vue3, as stated in the documentation: https://vitejs.dev/guide/features.html#css-pre-processors

You only need to add

npm add -D sass

And in the script tag use

<style lang="scss">
// OR
<style lang="sass">

answered Mar 22 '22 at 15:22

dungvo

289
4
7

2

Remember to run command "npm run dev" again for it to take effect. – Camilo Go Jr. Aug 31 '22 at 08:49

score 6 · Answer 4 · answered Dec 13 '22 at 18:42

My problem was the following: I coudn't get scss variables within <style lang="scss"> and now this is my good config:

// vite.config.ts

export default defineConfig({
  plugins: [
    vue(),
    ...
  ],
  ...,
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: ` // just variables loaded globally
          @import "./src/assets/styles/setup/fonts";
          @import "./src/assets/styles/setup/colors";
          @import "./src/assets/styles/setup/mixins";
        `
      }
    }
  }
});

// App.vue

<style lang="scss"> // the main file that imports everything related with styles
@import "@/assets/styles/main.scss";
</style>

What got it working for me was really the ` ` with my specific location for the scss in the App.Vue — DigitalDirk, Dec 20 '22 at 03:48

score 3 · Answer 5 · answered Oct 04 '22 at 03:17

3

I had the same problem and simply solved it by installing sass as a Dev dependency.

npm i -D sass

answered Oct 04 '22 at 03:17

Simon Angatia

688
1
10
16

score 2 · Answer 6 · answered Feb 16 '22 at 05:13

2

Solutions:

"npm add -D sass" ---------- (-g flag will not work in vite now 16/02/2022). Or,
"yarn add -D sass" - Run these comments in your command line.
In main.js file "import './style.scss' " will not work, so I added my sass file in html

answered Feb 16 '22 at 05:13

Nadim Shuvo

49
4

What syntax did you use to add from your index.html? – mpr Oct 21 '22 at 16:09

score 1 · Answer 7 · answered Oct 23 '22 at 14:39

If already install sass in your react.js app. Uninstall it. Once Uninstall is done Check your packge.json file. It's will look like that.

"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"vite": "^3.1.0"   }

Then Ren this command

npm cache clean --force or npm cache clean -f

Close your Vscode and Re-open it. Now Reinstall sass in your react vite app.

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

Once Installation done your json file look like that.

  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "sass": "^1.55.0",
    "vite": "^3.1.0"
  }

This is not question related to React.js but Vue but overall it similar fix path — devzom, Nov 02 '22 at 04:02

how to use sass using in vuejs3/vite

7 Answers7

Linked