What is the best way to use SASS inside a Blazor Web Assembly project?

Viewed 7813
2 Answers

As mentioned in the MS docs, you can use the Delegate.SassBuilder package to help you compile sass/scss files to css.

It works pretty well, and very easy to install with no configuration required.

NOTE

For newer Sass build requirements - I've created this LibSassBuilder

I recommend using sass directly from the command line.* Note that:

Dart Sass is the primary implementation of Sass

and it can be installed and used globally as a CLI tool, no npm project or pipeline required is the key.

You can install sass via choco:

choco install sass

Or with with npm:

npm install -g sass

Then you can right click on wwwroot and select Open in terminal and build and watch in native ways enabled by sass. To watch all see the following for instance:

sass --watch .:.

enter image description here

  • (A bit begrudgingly, but other solutions, like building on every build, has big downsides. Like it building sass resources on every build: That's really wasteful when you've not been messing with your styles ... Or take the fact, in my case right now, that neither the WebCompiler extension nor LibSassBuilder as mentioned above seem to work on this preview version of Visual Studio.)
Related