title: Proper way to add SASS to .NET 6 Blazor application?
body: <p>So I've been searching a bit and it seems like using <a href="https://www.nuget.org/packages/Delegate.SassBuilder" rel="noreferrer">Delegate.SassBuilder</a> is a good way to add SASS to your Blazor project. It detects any .scss files and builds them into .css files in the same directory.</p>
  <p>It works as expected, however, I'm looking for more customization regarding &quot;code behind&quot; files, but with CSS files instead (not sure what the right term is except &quot;code behind but for css&quot;). By default, your Blazor application will contain files such as this:</p>
  <p><a href="https://i.stack.imgur.com/uvmKH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uvmKH.png" alt="enter image description here" /></a></p>
  <p>So you have a .razor file, and then you have a .razor.css file. In index.html, it adds <code>&lt;link href=&quot;projectname.styles.css&quot; rel=&quot;stylesheet&quot; /&gt;</code> automatically, which handles these styles.</p>
  <p>However, if I rename that .css file to .scss and build the application, I end up with this result:</p>
  <p><a href="https://i.stack.imgur.com/yH6u2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yH6u2.png" alt="enter image description here" /></a></p>
  <p>It works, but I have to build it first, then run the application. Quite annoying. What's also annoying is that the files are no longer nested. I would like to see something like this instead:</p>
  <p><a href="https://i.stack.imgur.com/aJLjU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aJLjU.png" alt="enter image description here" /></a></p>
  <p>What would be even better, is that the .css file is hidden and I just have to deal with the .scss files. I honestly don't care what the .css file contains, as it has been minified and so on.</p>
  <p>There must be a better way, but I can't really find it.</p>