title image, blazor logo plus the sass logo

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

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

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.

  • 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

Designer, BSID at GaTech. Find me on instagram.com/art.last.night

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store