Is there a way to compile all .scss files in a /scss folder into a single .css that can sit inside the wwwroot/css/ folder in a .net/razor pages application? I currently have Web Compiler 2022+ installed but it doesn't group files together.
I've tried using import statements in a single main.scss file but that doesn't work either.
I'm new to Visual Studio, C# and .net so any suggests would be great.
Per the configuration capabilities of Web Compiler 2022, it will minify but doesn't have bundling features. There is a .NET Nuget package named BuildBundlerMinifier that does allow minification and bundling. However it has not been updated since 2020 and will not work with any ES6+ JavaScript code. That's because it uses an older version of Nuglify (1.13.8) that performs JS code minification so there is no way of minifying ES6 and later code by using the tool currently (it will error on build). The pure .NET approach to this especially for razor pages / Blazor isn't super robust.
Therefore if a powerful JavaScript bundling tool is needed for a .NET web app, you'll need to explore Gulp, Grunt, or WebPack which are all mature JavaScript options for bundling and minification (and can be integrated into a .NET app). If minification is all you need, just stick with Web Compiler 2022, and reference each individual minified file.