How to use Sass in React with Vite

hello everyone welcome to deftamine in this video I'm going to teach you how to set up set or SCS in react with beat configuration in the previous video I have teached you how to set up feed in react project and if you want to check it out I will put the link in the description all right let's get started first of all I just want you to go to feed website vjs.dev and then go to get started and then go to features and click on CSS over here and when you scroll down you will see see it as preprocessor this is how you use SCS set in V configuration all right just copy this command npm at Dash D and SAS let's go back to visual studio code and then stop our application first Ctrl C and then paste the command over here hit enter to install SAS packages The Next Step you have to do to import SAS files to your react component okay let's go to Source here this is the default components that come with react when I install it okay uh I can delete this one okay and I can let me clear this one okay clear this one okay let me create a div over here hello react with v and as the address okay we remove this one okay we don't have this one anymore remove this one and for index over here I can remove it okay and this main yeah remove this one and here I have to save this one all right go back we should have something like this all right let's create our first scss files in Source folder over here right click and new files and for example I'm going to name is app.cs okay let's apply app.cs over here let's import it import app.se address okay let's put class name over here for example hello as the address okay is it a sample see it as go back here put hello at CSS background color green save all right let's see it's work for example if I put another div inside here okay clean this up okay and over here I put like sample text okay and put class name over here and then just put sub hello text okay copy this class and put this inside here okay I can put a font size 20 pixel and BG and background color red okay let's take a look here see as CSS work in our react project completely alright this is all about this video If you like this video don't forget to click like subscribe and comment down below thank you so much for watching

Channel: Devtamin

Views: 11,020

Keywords: programming, code, coding, coding tutorial, programming tutorial, web development, use Sass in React Vite, Vite SCSS React, Vite Sass React, use SCSS in React and Vite, use SCSS in React Vite, use Sass in React and Vite, Vite configure Sass, setup Sass in Vite React, set up Sass in React Vite, install Sass in React Vite, use Scss in React Vite, Sass React Vite, SCSS React Vite, install Sass in React and Vite

Id: SX9lDjFgeUU

Length: 3min 55sec (235 seconds)

Published: Tue Jun 27 2023