How to make the build process not compile all .scss files into a main.css

Question

All my various components have some .scss files which get eventually merged into a single main.css This make it hard to debug as the Chrome Developer Console has no back-references to the source scss like for example, component1.scss

For debugging-run purposes is it possible to keep the various .scss files separate unmodified?

Consider the following snapshot from the Chrome Dev. Console, I can guess where a style like ChannelEntryComp is coming from, but I am clueless about a style like "label", "input", Perhaps, they may have been redefined in different .scss in my project, intentionally or not, and thus side-effecting the net result.

Here is my current build command line for the browser build, are there parameters I could specify here or elsewhere?:

ionic serve --no-open --allow-file-access-from-files --target cordova

Just when I think I understand CSS, it surprises me a week later with more broken renderings.

If there CSS tools or extension you would like me to consider, please share.

Consider me a novice.

Still on ionic 3 :(

Thank you.

i
TypeScript version
Version 4.3.5

Ionic:

   Ionic CLI          : 6.13.1 (C:\Users\AXM\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.2, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-webview 4.1.3, (and 15 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (C:/Users/AXM/AppData/Local/Android/Sdk)
   NodeJS            : v12.9.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10