Is it possible to import all the util scss to index.scss and use them inside of the project without importing the index.scss in create-react-app?

I created a SPA with CRA. react version is 17.0.2 and the node-sass version is 6.0.1. The current folder structure of the project looks something like this:

Inside the Styles folder, I have all the scss util files such as color variables, general styles, classes, and typography. The folder has a main.scss file where I import all the other sub-style files. "styles/main.scss". If I directly import the file into any folder inside my project I can use those variables and styles defined in it. Is there a way for me to, instead of importing it every time, just import the file in the main "index.scss" (located in src/index.scss, which is imported in src/index.js) and use the style in inner component styles?

To summarize what I need to be done;

1. To import the styles written inside of src/styles into index.scss insrc
2. To use the variables and styles in those files from inner component style files without importing index.scss or any other helper file
3. is it possible with the react's CSS compiling abilities with maybe some modifications to the webpack configurations?