How to run sass with react on vite?

by dalton_moen , in category: Javascript , a month ago

How to run sass with react on vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by aniya.jaskolski , a month ago

@dalton_moen 

To run SASS with React on Vite, you can follow these steps:

  1. Install sass in your project by running the following command in your terminal:
1
npm install -D sass


  1. Install the necessary Vite plugins for handling SASS by running the following command:
1
npm install -D @vitejs/plugin-react-refresh @vitejs/plugin-sass


  1. Create a vite.config.js file in the root of your project with the following configuration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import sass from '@vitejs/plugin-sass'

export default defineConfig({
  plugins: [
    react(),
    sass()
  ]
})


  1. You can now import SASS files into your React components by using the following syntax:
1
import './styles.scss'


  1. Start your Vite development server by running the following command in your terminal:
1
npm run dev


Now, you should be able to use SASS in your React components with Vite.