Vite React Typescript with Sass

all right so today we're going to be using vite to create a react typescript project and we're going to add sas to it so that we can so that i can show you how to get sas working with white since i didn't find any good tutorials on youtube for it so let's get started you're gonna go to white and you're gonna click the get started button now we're gonna see the available templates here there's also community maintained templates if you want to add eslint or whatever you want but we're to be using these templates in the video so we're going to be adding react type script and then we're going to be going to preprocessors and adding the sas so we're going to open our terminal you're going to find a place in your operating system in your file directory and whatever you want to place the the the project and you're going to be saying mpm create write at latest and you're going to give the project name in this case i'll give it a name of testing so we're going to create the project we're going to cd into the project so we're going to go into that testing directory file folder and we're going to run npm install so the dependencies will be installed and now we can open up visual studio code there so we're going to go to visual studio code and we have our initial project structure now we can run the project npm run dev and everything is going to be working right but we are we also want to add the sas to it so we can have our styles and to a way to do that is you can see here you can go to features and you can go to css preprocessors it's going to support sas so we're going to type this in we're going to open a new terminal type in this it's going to add sas you now close the window and now we have sas enabled so let me just clear this up so we can we can test test it out right so we're gonna go create an empty div it's gonna say h1 hello world right we're gonna remove the unused state we're not going to be using anything here and we're going to delete these the logo the css and the let's see main index index css we got we got this okay so when we go to our app now it only says hello world now we want to add a sas file so we're going to create a style folder and we're going to add let's just say for testing purposes main dot fcss right and we have an h1 tag here right so let's test it out so we can say h1 and i can say color.red so is this working no it's not why because we have to import it here so we're going to say import start from styles and we're going to say main dot fcsf i have no idea why autocomplete is not working but okay and there you go we got it working so let's try some variables just in case see if this works so let's say primary color is equal to blue and let's say secondary secondary color is equal to let's say purple okay now let's say h1 is primary right it has autocomplete on this thing which is good does it have autocomplete let me see yeah it has autocomplete primary and we go we add blue let's switch it here let's see and let's that's the secondary color purple all right so everything's working and you can you can now continue to work on your project i'm not going to be doing a sas tutorial but this is a tutorial to how to set up the environment you can check the community community maintain templates if you want to use eslint and stuff like that but this is how you set up the project and everything is fast good you don't need to write css you don't need to compile this sas to css they use the css file so everything is working out of the box and you can say whatever you want here really you can add classes and you know you know the things that you can do so that's how you create the white project react typescript and add sas to it

Channel: Tenacity Dev

Views: 10,929

Keywords: React, Sass, Vite, Typescript

Id: VaDZ4NS6dbY

Length: 4min 17sec (257 seconds)

Published: Fri Apr 01 2022