Adding Sass to Blazor with CSS Isolation using just one line of code

A simple “set and forget” method with dart-sass and .net5.0

Why this method over other tutorials?

• This uses dart-sass, the official implementation of sass, which means all the latest features & bugfixes, unlike other tutorials and VS extensions, which almost all use either node-sass or libsass (both of which are now deprecated)
• Super simple. Just drop in one line of code and never have to touch it again.

Before you begin:

• Make sure you have node.js installed
• Make sure your blazor project is running .net5.0 (for CSS isolation)

If you’re creating a new project, you can easily change the target from the dropdown when creating the blazor app.

If you are migrating from an existing blazor app, follow this tutorial

Basic Installation

Its important to have dart-sass installed, and not libsass or any other implementation.

We can setup SASS using NPM. Open a cmd / powershell window and run

npm i -g sass

This will install dart-sass globally and also add sass to window’s environment variables, allowing you to run it in the command line.

Project Setup

Now lets add some sass in the project! I’ll keep it simple for the sake of the tutorial but any SASS architecture should be fine. Here, I added the folder Styles , and then added a variables partial file (head over here to learn more about SASS)

CSS Isolation

Adding CSS isolation is pretty easy as well, just create a SASS file in the same folder with the razor file, keeping the same file name and adding .scss after it. (example below) VS should automatically put that file under the razor file.

Well, how do I access and reference other sass stylesheets?

As an example, we can still access the variables stylesheet we defined before. Simply write this line in any scss file as you would if you were in the Styles folder.

@use 'variables' as v;

(I’ll explain in more detail how & why this works below)

The Magic

Finally, lets add the one line of code that will compile everything.

Put the line below into the pre-build script of your project.(Right click the project, properties, build events)

sass Styles:wwwroot/css Pages:Pages Shared:Shared --style compressed --load-path=Styles --update

You can find out in more detail how this works on the SASS website, but to quickly explain:

• This part Styles/main.scss:wwwroot/css/main.css tells sass where to look for sass/scss files. It exports everything in the styles folder into wwwroot/css
• Pages:Pages Shared:Shared simply finds all files in the Pages and Shared folder and exports it in the same folder. ( this also works with all subfolders inside the folders too)
• The --style compressed tells sass to minify the file,
• --load-path=Styles tells sass to load the Styles folder. This allows for you to access anything inside that folder, anywhere using @use or @import
• --update tells sass to only compile files that have changed since the last compile

Now, just build the project and see the magic happen.

Optional: Developer onboarding

If you’re working with other developers, it might be nice to let them know they need sass installed to run the project. Add this to the csproj, right before your prebuild script:

<Target Name="SassCheck" BeforeTargets="PreBuild">
<Exec Command="sass --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCodeSass" />
</Exec>
<Error Condition="'$(ErrorCodeSass)' != '0'" Text="Dart-sass is required for this project. Install globally with 'npm i -g sass' " />
</Target>

All this does is simply print out a pretty error code if it doesn’t detect sass is installed. You can get more complex but this is just a simple example.

Some Caveats

• Visual Studio doesn’t seem to have the latest features of sass on intellisense. ( At least to my knowledge — let me know if I’m wrong) Features like @use will show up with warnings ( but still compiles fine).
• Sass will only be compiled on build — however, CSS isolation is only compiled on build anyways so this shouldn’t affect development too much.

And that's it! In my opinion this is the simplest way of integrating sass into a Blazor project. Thanks for reading :)

You can find example code here: https://github.com/codelastnight/BlazorSCSSIsolated