Michael Bradvica joined Saxony Partners in 2020 as a Software Engineer on our app dev team. Previously, he has worked as a Full-Stack .NET Developer for technology services firms. You can read more of his thought leadership at MichaelBradvica.com – from which the blog post below has been adapted.

Using SASS in ASP.NET Core, Including Blazor

SASS is a CSS-preprocessor that allows us to create stylesheets for web applications using mixins, variables, functions, and nested rules. These SASS files are then compiled into standard CSS files for our use. ASP.NET Core and Blazor can integrate SASS into the build process. This allows us to write our stylesheets in SASS first or even import and modify existing frameworks. Today, we are going to use SASS to import the Bulma library and change the primary color with just a few lines of code.

Integrating SASS Into Blazor: Step-by-Step

A few things are necessary:

1) An updated version of dotnet Core

2) An updated version of Node.js

3) In Visual Studio, start a new ASP.NET Core Web or Blazor project

The first thing we need to do is make sure our tooling is correct for how Visual Studio will use Grunt.

Go to Options -> Tools -> Projects and Solutions -> Web Package Management. Make sure it looks like this:

![Correct Tooling](ide-tooling.png)

Once that is ready, we need to add a package.json to our solution because we will be using a few npm packages to handle our SAAS to CSS compilation.

In the Solution Explorer at the solution level, right-click -> Add -> New Item -> npm Configuration File

![Package.json](package-json.png)

Once the file is added, open the command prompt or Git Bash then navigate to the solution level where the package.json file is located. (One of the easiest methods of navigation is in File Explorer, right-click -> Git Bash Here.)

We want to add the following packages as a dev dependency and Bulma as a normal dependency.

– Grunt

– Grunt CLI

– Grunt SASS

– Node SASS

You can use the following commands:

npm install bulma

npm install grunt grunt-cli grunt-sass node-sass –save-dev

Our package.json file should now look like this:

“`json

{

  “version”: “1.0.0”,

  “name”: “asp.net”,

  “private”: true,

  “devDependencies”: {

    “grunt”: “^1.4.1”,

    “grunt-cli”: “^1.4.3”,

    “grunt-sass”: “^3.1.0”,

    “node-sass”: “^6.0.1”

  },

  “dependencies”: {

    “bulma”: “^0.9.3”

  }

}

“`

Your version numbers will probably be different as this post was done in the summer of 2021.

Just as we added our package.json at the solution level, right-click -> Add New Item -> Choose a javascript file, and name it “gruntfile.js”

![Add Gruntfile](add-gruntfile.png)

Add the following contents to your new Gruntfile:

“`javascript

/// <binding AfterBuild=’default’ />

module.exports = function (grunt) {

    var sass = require(‘node-sass’);

    grunt.initConfig({

        sass: {

            options: {

                implementation: sass,

                sourceMap: true,

                outputStyle: ‘compressed’

            },

            dist: {

                files: [

                    {

                        expand: true,

                        cwd: “Styles”,

                        src: [“**/*.scss”],

                        dest: “wwwroot/css”,

                        ext: “.css”

                    }

                ]

            }

        }

    });

    grunt.loadNpmTasks(‘grunt-sass’);

    grunt.registerTask(‘default’, [‘sass’]);

};

“`

This tells the pre-processor where to look for our SASS files and also where to compile them. Currently, we are saying our SASS files will be in a folder called “Styles” that will exist at the same level as our package.json file —at the solution level. We will output the compiled CSS to the CSS folder located in the wwwroot. The binding at top says that our pre-process will run after every build.

Note: Your SASS files cannot be in the wwwroot folder, which is reserved for serving only static files.

Add your “Styles” folder (or whatever you wish to call it) then create a SASS file inside of it.

Here is what it looks like at the solution level:

![Solution](solution.png)

I am going to change the primary color in Bulma from its default of turquoise to something different. (This post is not concerned with teaching Bulma, changing a color is simply a common use case.)

“`scss

@charset “utf-8”;

// Define a variable.

$orchird: #AF69EF;

// Update bulma’s primary color

$primary: $orchird;

// Import the rest of bulma

@import “../node_modules/bulma/bulma”;

“`

All we have done is updated the primary color and imported the rest of the library.

Now, we just build our solution, and our color.css file should be generated.

Note: I unloaded and reloaded the solution to get Visual Studio to fully recognize the Gruntfile.

Our color.css file being generated:

![Generated file](generated-file.png)

The last step is to import our new CSS file into our application and test it out:

Our index.html with our CSS import:

“`html

<!DOCTYPE html>

<html>

<head>

    <meta charset=”utf-8″ />

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

    <title>SassBlazor</title>

    <base href=”/” />

    <link href=”css/color.css” rel=”stylesheet” />

</head>

<body>

    <div id=”app”>Loading…</div>

<script src=”_framework/blazor.webassembly.js”></script>

</body>

</html>

“`

And our Index page to look at our update:

“`html

@page “/”

<h1>Hello, world!</h1>

<p class=”has-text-primary”>Welcome to your new app.</p>

“`

Our final result with a new primary color:

![Result](result.png)

Special thanks to Mr. Colin Bacon for providing the inspiration and skeleton for this article. His blog post was published in 2017 but has since been outdated from new versions of the npm packages. This article was an exercise in getting SASS operational in the newest versions of dotnet core, node, and trying to solve a common use case. You can read his blog here.

Making Digital Practical with Saxony Partners

Technology and digital strategy can be complicated, but our goal at Saxony Partners is simple: Make Digital Practical.

Saxony Partners will meet you where you are and help you get where you want to go. Our pragmatic approach helps ensure early success by leveraging proven technologies and practical solutions in a cost-effective way.

Our team of app dev experts, full-stack developers, and software engineers work with clients to optimize their technology investments and leverage that technology to meet and solve business needs and challenges.

If you or your company is looking for help with software development, reach out to us here.