Having used sass for sometime now I’ve gotten quite used to it for obvious reasons. The things I really enjoy about is obviously the nesting of classes which follows the natural order of the DOM tree and makes it very easy to organize and make out the flow of your css and also the fact that you can dynamically define your media queries and include them wherever you want using mixins.
But react advocates for structuring components into individual folders containing the style sheet for that particular component as well. I feel like this approach would now make nesting less useful, there might even be conflicts as well as components are no longer static HTML tags but dynamic JavaScript.
Also would the dynamic media queries still work with mixins?
Is there any react guy that uses sass here?
Did you suffer any trade-off to use sass in react?

Rgade:
Having used sass for sometime now I’ve gotten quite used to it for obvious reasons. The things I really enjoy about is obviously the nesting of classes which follows the natural order of the DOM tree and makes it very easy to organize and make out the flow of your css and also the fact that you can dynamically define your media queries and include them wherever you want using mixins.
But react advocates for structuring components into individual folders containing the style sheet for that particular component as well. I feel like this approach would now make nesting less useful, there might even be conflicts as well as components are no longer static HTML tags but dynamic JavaScript.
Also would the dynamic media queries still work with mixins?
Is there any react guy that uses sass here?
Did you suffer any trade-off to use sass in react?

It depends on how you are rendering it. I stand to be corrected but react loads all files on start up unless maybe you use lazy loading for your components. So conflict will arise if you styled a class in one component and try using the same class with different styles in another.

With sass you avoid this by nesting all your component styles under the component class name. This prevents conflicts. As I can style a p tag in one component and be rest assured p tags in other components are untouched. Yeah mixins works

jikins:


It depends on how you are rendering it. I stand to be corrected but react loads all files on start up unless maybe you use lazy loading for your components. So conflict will arise if you styled a class in one component and try using the same class with different styles in another.

With sass you avoid this by nesting all your component styles under the component class name. This prevents conflicts. As I can style a p tag in one component and be rest assured p tags in other components are untouched. Yeah mixins works

Thanks a lot. This is a refreshing answer.