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
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.
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
@use 'variables' as v;
(I’ll explain in more detail how & why this works below)
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.csstells sass where to look for sass/scss files. It exports everything in the
Pages:Pages Shared:Sharedsimply finds all files in the
Sharedfolder and exports it in the same folder. ( this also works with all subfolders inside the folders too)
--style compressedtells sass to minify the file,
--load-path=Stylestells sass to load the
Stylesfolder. This allows for you to access anything inside that folder, anywhere using
--updatetells 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" />
<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
@usewill 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