React and Sass Tutorial - Intro to SASS

Hey guys in this video I will show you how to configure and setup sass in a React environment. Then I will show you the fundamental features existing in the framework and how to do cool stuff like using variables and functions inside your style sheets.
-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[andrewbrower]

This is an excellent video. One important detail that was missed in this video is regarding the savePath for Live Sass Compiler to know where you want it to create the css file for each scss file that it watches. If your Live Sass Compiler is placing the css files in a "dist" folder in your project root, go into your Live Sass Compiler settings and change your to the following:

{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/"
}

This also minifies the css file which is good for production.

[kunaltiwari]

Once again, a masterpiece from Pedro Tech

[anuoluwapoomobolaji]

I promise this is a beautiful tutorial, every part was explained clearly. Thank you.

[CPower]

Sass is amazing, you are amazing! Super comprehensive intro, everything you need to get well on your way with Sass. I'd love to see an advanced Sass vid like you mentioned. Specifically implementing selectors such as :hover or :focus, as well as animations perhaps using keyframes? Is that something you might do in the future? Thanks for the vids, love your content!

[fadzisondoro]

I'm new to sass, like this has been the first video I'm watching on it and you explained it so well! I'm totally sold on it, and its efficiency! Would definitely love to see more advanced sass videos from you Pedro, thanks sm!!

[cmoney]

Best explanation of react and sass configuration I’ve seen

[sofiaferrer]

Pedro, estás salvando mi carrera, te amo!! ❤️

[owltrades]

Most underrated Channel i've ever seen. 🔥

[kk]

Thanks a lot for the video Pedro!! Hoping more Sass tutorials from you<3

[dylan]

Are you reading my mind? I searched for this literally just this morning. Thanks!

[elenemetreveli]

Your channel is a gem! I just wanna thank you🙏

[SvetaSveta-mshi]

OMG, I'm obsessed with your channel. You deserve way more subscribers. 😍

[TheNamesJT]

Whats your output path for the compiler? to make it compile in the same folder as the scss file is in. Also, for some reason component.module.scss isn't working and not sure why. Make a video on using css module with scss because can't seem to get it to work myself unfortunately.

[martingonsalves]

Yes, nice Pedro, keep up the good work!

[mariacenci]

Great tutorial thank you so much!! 10000x times better than my course :)

[Justinsbpark]

Thanks for the great video. How do you add global CSS? Let's say I want to add something like body: { font-family: 'Arial', sans-serif; }, which file should use?

[santaclaus]

Excellent video. Thank you for your time

[promisingpurchase]

Would it be better to write a script tag to compile Sass in your json file so that your styles are put into one css file instead of compiling two separate css files for each scss file? this is a great video but just curious on the best method to use sass with react.

[developersstack]

Great Tutorial. But we can npm i sass instead of installing the vs-code extension for watching the .scss file. And we can directly import the .scss file to our .jsx files.
Either way! this was really helpful.

[alexalex-zhep]

You have explained perfect! Thak's!