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.
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.
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!!
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!
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!
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.
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.
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?
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.
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.
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 ?
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
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?
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...!!!!!
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😔🙏
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.
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.
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
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.
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
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.
Thank you so much
3 years later and this tutorial is still great, thanks for sharing PedroTech
You explain everything clearly anyone can understand
Most underrated Channel i've ever seen. 🔥
Glad you think so!
Are you reading my mind? I searched for this literally just this morning. Thanks!
Hahaha happy to hear that
Best explanation of react and sass configuration I’ve seen
Once again, a masterpiece from Pedro Tech
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.
this will be less messy, thanks
what about the autoprefixer?
Correct, to make everything simplier :D
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!!
OMG, I'm obsessed with your channel. You deserve way more subscribers. 😍
Hahaha thank you! Appreciate the support!
Pedro, estás salvando mi carrera, te amo!! ❤️
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!
Thanks a lot for the video Pedro!! Hoping more Sass tutorials from you
Yes , nice Pedro , keep up the good work!
Thanks a lot!
I promise this is a beautiful tutorial, every part was explained clearly. Thank you.
aweaome..you make sass easy and clear..
Glad to hear that!
Your channel is a gem! I just wanna thank you🙏
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!
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.
Same issue. I cant seem to find a solution either.
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.
Would be great to see a full project with react and sass to see how you organize your folders etc.
Same, i need best practice desprately, my codebase is a mess !
You have explained perfect! Thak's!
Great tutorial thank you so much!! 10000x times better than my course :)
Very good explanation. Thank you!
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?
When I save my SCSS Its not able to generate CSS. Please help me on this
you haven't turned on the watch scss on the bottom of your vs code
Excellent video. Thank you for your time
looking forward to advance sass tuitorial brother!
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.
Very insightful.
I have the sass compiler and the sass extensions. however when I save iit the not create the css files with the compiled scss.
Hey can you make one small example with HOC and React Router together?
Thanks
would be great
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.
Would appreciate seeing ya make a whole website on sass :)
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 ?
in CRA, sass is configured by default, you just need to install it but if you are using webpack you need to configure it.
Yep! You technically dont need to do anything after downloading the extension. It will look for all .scss files and compile them to css!
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
You saved me. ❤️
Great tutorial! Thank you very much!
Great video, thanks Pedro
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?
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...!!!!!
Thanks for sharing
Thanks for watching!
here we go again...thank you bro..
Always welcome!
Well done my dear friend👍
Live SASS does not support the @use and @forward. SASS is moving away from the @import. Maybe you could redo this video.
Hope so 😪
What if there is 100s of components? Then there will 100s of sass, css, css.map files how will we manage that?
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😔🙏
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.
He mentioned in the beginning that this is a specific SASS+React video😂
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.
Kindly help teach us how to use sass and react full tutorial.
Thanks
Thank you bro ♥👍
Thank you very match bro!
Thanks for the video
Hi. great rect-sass info. The video quality it s a bit annoying... hope you can fix that bc you created a good material.
hey pedro can you make a cms tutorial or a advanced javascript tutorial because im struggling to learn it. Love your work.
thanks man🔥❤️
One doubt that i still have is: Is it bad to use sass/scss with react ?
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
Thank you! Thats a good video idea!
helpful video thanks
u dont need to install node-sass ?
Crisp!
why not use node-sass?
Thank you 👍🏼
شكرا لك ، قناتك جدً مفيدة
I love you my Friend
Thank you
nice
I love code
Make a video that involves configuration. Not everyone uses vsCode. Please ༎ຶ‿༎ຶ
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.
Sass isn't a CSS framework, it is a CSS preprocessor!
Live SASS Compiler is outdated
Órale wey
rovery
S**ass** 😅😅
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