Confusion with SCSS

in the video that i added, u can see i have made a

utilities

utilities

folder for styling purpose where i have 2 files

reset.scc

reset.scc

which is for css reset and

variables.scss

variables.scss

which is fro global variable
now they r imported in my

App.scss

App.scss

i didn't install any scss pkg using npm, only a live scss compiler, beforehand when i made

App.scss

App.scss

and started the live compiler it made 2 files

App.css

App.css

and

App.map.css

App.map.css

and my compiled code gets imported in

App.css

App.css

now after making the utility files when i started the compiler, it made both

.css

.css

and

.map.css

.map.css

for each of my scss file and compiled the code in their respective

.css

.css

file

but since i had them

@imported './path'

@imported './path'

in my

App.scss

App.scss

as well, the compiled code of my utility files are also in my

App.css

App.css

so now i am confused about what to do. I thought it was supposed to only make a css file for my

App.scss

App.scss

and as other scss files will be imported here it'll compile all of them into one

App.css

App.css

file

So my question is, am i getting it wrong or is it supposed to not work like it is rn?

tnx