How to use sass using in vue.js 3 & vite?

Member

by lily , in category: Javascript , a month ago

How to use sass using in vue.js 3 & vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by wilmer.lemke , a month ago

@lily 

To use SASS in a Vue.js 3 project built with Vite, you can follow these steps:

  1. Install the necessary dependencies:
1
npm install -D sass vite-plugin-components @vitejs/plugin-vue


  1. Create a vite.config.js file in the root of your project with the following content:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'vite-plugin-components'
import vueJsx from '@vitejs/plugin-vue-jsx'

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


  1. Update your App.vue file to use SASS styles:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <div class="app">
    <h1>Hello Vue</h1>
  </div>
</template>

<style lang="scss">
.app {
  h1 {
    color: red;
  }
}
</style>


  1. Run your Vite project using the following command:
1
npx vite


Your Vue.js 3 project should now be set up to use SASS styles with the help of Vite.