how to use sass using in vuejs3/vite - vuejs3

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

Answer 1

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";
`
}
}
}
})

Answer 2

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.

Answer 3

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">

Answer 4

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>

Answer 5

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

Answer 6

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

Answer 7

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"
}