How to use Sass in Vue.js with Vite | Set up SCSS in Vue JS using Vite

In this tutorial, I'm going to show you how to install Sass in Vue and how to use SCSS in Vue applications using Vite. Vue 3 is now used Vite instead of Wepack, so it's so simple to set up Sass in Vue3.

Resource Links

[JuanEstebanQuiramaLopez]

Ufff gracias! apenas estoy aprendiendo vuejs y sass, tu video fue perfecto!

[revaprasetya]

Thank you, short, straight to the point and easy to understand 👍

[pauliversoncortez]

Thanks for this easy and fast tutorial.

[Mikkyk]

Thanks, that's easy to understand with you

[jakobo]

That was exactly, what I was looking for. Simple and easy to understand and implement! Great job ant thank you! Like & Subscribe 🤠

[zergzerg]

When you ran command npm add -D scss you instll scss in devDependencies, but how styles will work after build project? Will scss library be included into production build?

[harran]

What? That ws easy. Why don't we have to use an extension like livesass (idr name) to watch and transpire to css? I've done razor projects and when I used sass there I had to write sass file then link the css file that it made but I don't even see the css files here. How is this working?

[hungify]

Sass announced their new module system
Why don't you use @use and @forward?
or use preprocessorOptions option
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
},
},
},
})