Setup React CSS Modules (with SASS, multiple classes and more)

In this tutorial I want to show you a few tips on how to setup modular scopes css along with setting up sass in a React project so that you can add css to components that don't clash with other components or global css, while also using sass syntax which lets you use global variables for colors, breakpoints etc. I also show you how to use multiple classes and import google fonts or Adobe typekit fonts in a react project.

CONNECT ON MY DISCORD:

0:00 intro
1:10 CSS Reset in React
1:50 Install Sass
3:30 Create SCSS Module file
4:50 (Selector Name error)
5:50 (Filename case sensitivity)
7:10 Multiple CSS module classes
8:47 Global variables
9:38 Global breakpoint mixin
11:54 importing Google Fonts/Adobe Fonts

#css #scss #react #webdevelopment

Get early access to my project/

Twitter:

[AktefaTest]

a video can't be this much clear and simple explanation

[jake_bareng]

this was an actual good video and it was not 1 hour long like other videos

[jerrellmarvel]

Thanks for the tutorial, i was struggling to make sass global variables in react. Your explanation saves me thank you 👍👍

[MKgobe]

This is definitely the video I wanted, I also love styling using sass and since I started learning react have been wondering how can I style each component like you would in css. Great video 💯 very informative with the little extras aswell.

[piotrszczesniak]

Awesomely simple :) Thanks! I also use classNames library alongside CSS modules and this set up is super convenient :D

[nigelflim]

Amazing! Super helpful, straight to the point and tremendous job explaining.

[davevans]

Thanks for the content :) Thought it was worth noting that if the namespace really annoys people you can do "as *" and then the mixin isn't required anymore. Only discovered this today so unsure of the ramifications, but figured I'd share the knowledge :)

[vadim]

Thanks for the tutorial! Could you also make a video on how to implement theme switching in React (or Next.js) with SASS usage? That is something I don't understand fully and I believe many viewers would benefit from

[LarissaOliveira-dizj]

Awesome content! great explanation, please keep doing videos like these! congrats!

[shafiemukhre]

Good video!👍
8:15 How about if I want to use BEM naming style instead like --red or --active or __element? className={`${styles.--red}`} doesn't seem to work.
And how about if I want to have --active modifier depended on an isActive state, not sure what's the best way to apply this with nested scss modules in react.

[Leo-olhg]

OMG, I never know react can using moudle.scss awsome!😂

[sekhangati]

Great video there. Very helpful. Kindly could yu share the global css reset. I would love to work with everything reset. Thank you.

[samielee]

I had an issue trying to use the "display:grid" and accessing the children with a className that would be added from a .map() method...
The problem was that ".parent:nth-child()" did not apply while using ".module.scss".. only changing it to plain ".scss" would work...
Would you know the reason for this problem? I made it work but couldn't find the right answer..

[antonbuldigin]

May i use module.scss with standart CRA or i must to configurate my own webpack settings?

[DannyEnglander]

Awesome tutorial, thanks! Is there a way to setup style linting along with this?

[solomonachugwoh]

Would scss work with framework like tailwind in react?

[williamsandyinc]

I must add not react, you can use any tag any element in react css file, its next js that wont let you.