Proper way to add SASS to .NET 6 Blazor application?

Question

So I've been searching a bit and it seems like using Delegate.SassBuilder 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.

It works as expected, however, I'm looking for more customization regarding "code behind" files, but with CSS files instead (not sure what the right term is except "code behind but for css"). By default, your Blazor application will contain files such as this:

So you have a .razor file, and then you have a .razor.css file. In index.html, it adds automatically, which handles these styles.

However, if I rename that .css file to .scss and build the application, I end up with this result:

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:

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.

There must be a better way, but I can't really find it.

user_2098652 · Answer

Okay, so it seems like I have two options:

A) Create a .filenesting.json file and have this as the content as the extensionToExtension (might need to be modified a bit):

"extensionToExtension": {
  "add": {
    ".razor.css": [ ".razor.scss" ],
    ".razor.css.map": [ ".razor.css" ],
    ".css": [ ".scss" ],
    ".razor.scss": [ ".razor" ],
    ".cs": [ ".cshtml", ".razor" ]
  }
}

B) Somehow get inside .csproj to work. As it is right now, the engine that handles CSS isolation does not look at excluded files.

For now I'll stick with option A, because that seems to work:

Proper way to add SASS to .NET 6 Blazor application?

1 Answers