Link @import (sass) and .module (react)?

Question

Sass

Good afternoon!
The question is, does it make sense to bind React modules to sass imports, and is it even possible?
Or take and import the sass module to each component, but then how to make variables for the entire project?
Or transfer everything to the main file without using a module so that later it is simply transferred down the branch and you can just use styles without modules?
I wonder how they do it on large scss / sass + React projects using modules or not, as far as I've seen in simple landings, all styles, variables, blocks are imported into one main file and then thrown in one file.
PS Here came the idea to throw all variables and global styles without modularity into the root (index.js), and throw all other styles into components using modularity, but I don’t know if variables in these modules will work)

Answer 1

Hey!
You are correct in your postscript.
1. We take styles.scss, import our commonStyles there - variables, mixins and so on.
2. We include this file in App or a similar component - all variables will become available for use.
3. We connect the modular style file to the component, use mixins and variables as usual.
4. PROFIT!