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

Question

What is the best way to use SASS with Client side blazor. I looked into the this

https://github.com/madskristensen/WebCompiler

But it looks like works only with Visual Studio. I am using Visual Studio Code.

Projectionist

did my answer help you at all? My LibSassBuilder is now available as a global tool as well. – Constringent

@Constringent I have installed libsassbuilder - it does compile the sass into css as expected but it is not getting applied in my blazor project. I wonder - does it run before the build? According to learn.microsoft.com/en-us/aspnet/core/blazor/components/… " integrating CSS preprocessors is seamless as long as preprocessor compilation occurs before Blazor rewrites the CSS selectors during the build process." could this be an issue? – Vandalism

Answer 1

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

Constringent

Delegate.SassBuilder works in MVC projects :) – Siskind

As the Delegate.SassBuilder uses .exe file this does not work on linux distros. The other answer solved my issue. – Krantz

Answer 2

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 .:.

• (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.)

Galvanoscope

Very helpful answer. And do you know any way to bind this routine to dotnet run or dotnet watch command? For example like scripts in package.json when using npm. – Krantz

Answer 3

I've made a simple console application, that can compile sass files to css with RCL support in Blazor WASM.

You can add your sass files into the wwwroot of RCL and write "_content/MyLibrary/sass.scss" in @use or @import at the Blazor Client. Watch mode also supported.

You can find the tool on github.

Month

Great!, this is exactly what I need to share the scss variables using RCL! Thank you! – Ommatidium