13

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.

Amitabh
  • 59,111
  • 42
  • 110
  • 159
  • did my answer help you at all? My LibSassBuilder is now available as a global tool as well. – JvR Feb 04 '21 at 06:35
  • @JvR 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 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0 " 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? – Adam Diament Oct 14 '21 at 08:59

3 Answers3

17

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

JvR
  • 1,022
  • 1
  • 11
  • 29
5

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.)
Nicholas Petersen
  • 9,104
  • 7
  • 59
  • 69
  • 3
    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. – ConductedClever Feb 25 '22 at 20:24
1

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.

aligin
  • 1,370
  • 1
  • 13
  • 18