I just leave this here, if someone looks clarification how the 7-1 pattern with the @use and @forward rules work, after @import marked deprecated in October 2024.

Answer to the original question:

The only reason why the index.scss is compiled as a seperate css file is the naming. If using a folder based structure then each folder can have an "aggregator" type of file, whose only responsibility is to collect all the files in the current folder and forward them out.
In the root folder the main.scss file should compile to css, hence this file does not have an underscore, while others do.

So just put an underscore before your filename, as _index.scss. As far Sass concern this will still be partial file, but a special partial file. The official documentation calls these file index files: https://sass-lang.com/documentation/at-rules/use/#index-files

However there is no explanation about the 7-1 pattern as this is only a preference to organize your scss. For this the best source I find is this repo (https://github.com/KittyGiraudel/sass-boilerplate) by Kitty Giraudel.

Worth to mention that there is a book written by her and Miriam Suzanne that goes in details of using Sass. If you wish so. https://www.miriamsuzanne.com/books/jumpstartsass/

About using the Live Sass compiler Glen has an extensive guide on his YT channel. https://www.youtube.com/watch?v=WV-Fm24IE0s&list=PLhdDmC4kQ8MqhX3RtLqfIwz8oaLut1m5X