React and Sass Tutorial - Intro to SASS

[@andrewbrower4158]

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 "liveSassCompile.settings.formats" to the following: { "format": "compressed", "extensionName": ".min.css", "savePath": "~/" } This also minifies the css file which is good for production.

[@tasnimtanzimpricila9361]

Thank you so much

[@ChukwunenyeEmmanuel-o5x]

3 years later and this tutorial is still great, thanks for sharing PedroTech

[@owltrades]

Most underrated Channel i've ever seen. 🔥

[@PedroTechnologies]

Glad you think so!

[@137dylan]

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

[@PedroTechnologies]

Hahaha happy to hear that

[@cmoney1928]

Best explanation of react and sass configuration I’ve seen

[@SvetaSveta-ms4hi]

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

[@PedroTechnologies]

Hahaha thank you! Appreciate the support!

[@kunaltiwari3118]

Once again, a masterpiece from Pedro Tech

[@fadzisondoro32]

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!!

[@8koi139]

The live sass does not work whit @use & @forward, and @import is deprecated, I use sass -w origin_path:destiny_path, also working whit _part files, makes it way easier, since it doesn't keeps creating new css files. Happy learning!

[@developersstack2640]

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.

[@NikhilKumar-ry7eg]

this will be less messy, thanks

[@siriusjaeger2823]

what about the autoprefixer?

[@ijlmandal]

Correct, to make everything simplier :D

[@bowss111]

Would be great to see a full project with react and sass to see how you organize your folders etc.

[@namesare4fools]

Same, i need best practice desprately, my codebase is a mess !

[@anuoluwapoomobolaji5642]

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

[@CPower1248]

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!

[@sofiaferrer4481]

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

[@k303k]

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

[@elenemetreveli1523]

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

[@DetlefDumpelmann]

Hey Pedro, don't use that live sass compiler from Ritwick Dey it has problems. Use the other one instead (Glenn Marks) that one is up to date and won't cause as much problems.

[@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.

[@alexalex-zh4ep]

You have explained perfect! Thak's!

[@martingonsalves430]

Yes , nice Pedro , keep up the good work!

[@PedroTechnologies]

Thanks a lot!

[@maxmaksum4673]

aweaome..you make sass easy and clear..

[@PedroTechnologies]

Glad to hear that!

[@ChrisMochinskiMusic]

1. The other .css/map/etc files were not auto-generated (7:20ish). I assume I'm doing something wrong. 2. I DID to an npm -g install sass and things appear to be working with my .scss file imported as-is on my App.jsx (working on all other components). Sweet. Love to hear thoughts on this! Go easy on me. Just trying to learn a bit.

[@randymartin5523]

Same issue. I cant seem to find a solution either.

[@kramyshan8121]

Very good explanation. Thank you!

[@mariacenci1772]

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

[@santaclaus897]

Excellent video. Thank you for your time

[@rahulmadishetty5820]

When I save my SCSS Its not able to generate CSS. Please help me on this

[@sahilsuman3820]

you haven't turned on the watch scss on the bottom of your vs code

[@thewiscokid81]

Live SASS does not support the @use and @forward. SASS is moving away from the @import. Maybe you could redo this video.

[@kalahari8295]

Hope so 😪

[@MehediHassan-pn5uc]

looking forward to advance sass tuitorial brother!

[@codedropsjs9633]

do I have to use Sass to make sure that CSS code works in all browsers or REACT does it just using regular CSS? I really need to know it. Thanks for this video

[@supriyakumari1908]

Hey can you make one small example with HOC and React Router together? Thanks

[@maxmaksum4673]

would be great

[@promisingpurchase7343]

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.

[@SunilNadar]

Very insightful.

[@shriraammks1681]

Would appreciate seeing ya make a whole website on sass :)

[@deboranortes]

Olá, Pedro. Gostei muito do seu conteúdo. Abri seu site para pesquisar o curso, mas a página não traduz para o meu idiona de forma alguma. Alguma dica?

[@albertoleitao94]

I have the sass compiler and the sass extensions. however when I save iit the not create the css files with the compiled scss.

[@yariveon]

Great tutorial! Thank you very much!

[@gusmt66]

Great explanation. However, the Variables.scss file is being compiled unnecessarily since you imported it from Navbar.scss and MainPage.scss There must be a way to only compile the .scss you will actually need.

[@romimaximus]

Ok i see you installed the "sass" extension, but i didnt understand, how does the ".sass" extension, run ? you have to configure it ? and how do you get the ".sass" extension started and watch the ".sass" extension files ?

[@Praxis_by_tanay_pingalkar]

in CRA, sass is configured by default, you just need to install it but if you are using webpack you need to configure it.

[@PedroTechnologies]

Yep! You technically dont need to do anything after downloading the extension. It will look for all .scss files and compile them to css!

[@filibertogarced]

You saved me. ❤️

[@steveadeyemi]

Kindly help teach us how to use sass and react full tutorial. Thanks

[@angelaraoz5482]

Good video, hope see more like this. I have a question, dont u have to install Node-sass to compile sass-css..? I have seen videos where are using this method... sorry if im wrong, im new in this. Im just asking...Nice video, thx for all...!!!!!

[@maxmaksum4673]

here we go again...thank you bro..

[@PedroTechnologies]

Always welcome!

[@ThColinPereira]

Great video, thanks Pedro

[@tegaogheneovo5881]

PedroTech totally unrelated working on a social media platform, want to simulate a gif using canvas.basically creating a canvas component which adds stickers or 3d objects to different frames of an image or video then converts the canvas (server side) to either a video or an audio gif: basically automat a gif with a canvas allow play and pause ,then add an audio file as a constraint to play and pause can you do a basic video on react with canvas thank you 😁 sensei😔🙏

[@mukeshdutt8025]

This is SASS specific video, why you have used react project you can explain simply with HTML file also. React already has SASS package that package internally convert SCSS to CSS and instead of that you mentioned install vscode extension.

[@marktheunknown1829]

He mentioned in the beginning that this is a specific SASS+React video😂

[@stefangriffin986]

Hi. great rect-sass info. The video quality it s a bit annoying... hope you can fix that bc you created a good material.

[@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?

[@chandrakant6283]

One doubt that i still have is: Is it bad to use sass/scss with react ?

[@abhaytiwari6411]

Well done my dear friend👍

[@vijaynavale3919]

What if there is 100s of components? Then there will 100s of sass, css, css.map files how will we manage that?

[@sirpripyat4274]

Thanks for the video

[@jeremyh9841]

u dont need to install node-sass ?

[@marwa_als]

شكرا لك ، قناتك جدً مفيدة

[@h__m7551]

Thank you very match bro!

[@vince8093]

hey pedro can you make a cms tutorial or a advanced javascript tutorial because im struggling to learn it. Love your work.

[@Uz_GameTactics]

Thank you bro ♥👍

[@kushagraaagnihotri1081]

why not use node-sass?

[@abdessamade6995]

helpful video thanks

[@idrisisholaagboola8676]

Nice tutorial, I always enjoyed your tutorial...I will be so grateful if you can make a tutorial on user authenticate with social media in mern stack either graphql or restAPI

[@PedroTechnologies]

Thank you! Thats a good video idea!

[@piyankarajayadewa7157]

Crisp!

[@abhishekrawat8579]

thanks man🔥❤️

[@MuhammadBilal-hq3xn]

I love you my Friend

[@pearlsswine]

This video could have been, like, 50% shorter if the first half wasn't an unnecessary CSS tutorial. LIke, yeah, I know how to use CSS, I don't have to watch you write a couple dozen CSS properties before getting to the actual Sass part.

[@mahendranath2504]

Thank you 👍🏼

[@njw_cs]

Thank you

[@crypto4elik]

nice

[@vuxuanhuy9079]

I love code

[@kalahari8295]

Make a video that involves configuration. Not everyone uses vsCode. Please ༎ຶ‿༎ຶ

[@tarek_maza]

Sass isn't a CSS framework, it is a CSS preprocessor!

[@darshaanaghicha8023]

Live SASS Compiler is outdated

[@RiteshNEVERUNIFORM]

rovery

[@sabertoothwallaby2937]

Órale wey

[@savithnishitha5562]

S**ass** 😅😅

[@pete531]

Bad video, very outdated. file structure is bad and also everything except you main style sass file should have "_" before the first letter, that means its a partial and it wont be compiled. then when everything is merged into main sass file, only that one is compiled into css