Use LESS in Blazor Application

I've been doing some styling work for Blazor projects recently so I thought it might be useful to write a post about it. We're going to have a look at how we can get it integrated into the Blazor application.

Let’s first include the package.json file to hold the npm packages. To do this, right-click project > Add New Item.. Search npm and select npm Configuration File and click Add.

This will add a package.json file in the solution. Now, we will install gulp and related packages from the command prompt. Go to command prompt (RUN > cmd) and navigate to the project folder then type the commands below and press enter.

npm install --save-dev gulp gulp-autoprefixer gulp-clean gulp-clean-css gulp-concat gulp-less

After the command executes successfully, the package.config will be something like below.

Next, let’s add gulpfile.js into our solution. To do this, right-click the project in Solution Explorer and click “Add New Item..” In the new items dialogue, search Javascript and select Javascript File and name it as "gulpfile.js" then click Add.

Paste the following comment into the Javascript file.

var gulp = require('gulp'),

    cleanCss = require('gulp-clean-css'),

    less = require('gulp-less'),

    concat = require("gulp-concat"),

    autoprefixer = require("gulp-autoprefixer");

gulp.task('less', function () {

    return gulp

        .src([

            '**/*.less',

            '!node_modules/**'

        ])

        .pipe(less())

        .pipe(concat('app.css'))

        .pipe(autoprefixer("last 2 version", "ie11", "safari 10"))

        .pipe(cleanCss({ compatibility: '*' }))

        .pipe(gulp.dest('wwwroot/css'));

});

And now we are ready to compile the less files. Let's create a less file and some stypes in the file for the test purpose.

Calling Gulp Task during Visual Studio Build

Visual Studio provides a GUI-based Task Runner Explorer to link the gulp task to execute during various stages of the Visual Studio build process. To get this explorer, Click View>Other Windows>Task Runner Explorer.

This will bring the Task Runner Explorer window at the bottom with output window tabs. Refer to the below picture.

The left column will display all the gulp tasks we have scripted in gulpfile.js.

Note - If you don’t see any tasks, try clicking the refresh icon seen at the top left corner of the Task Runner window. If you are still unable to see, then you may have not installed gulp and related gulp plugins locally using the npm package manager. You can click “Restore Packages” to restore npm package by right-clicking the package.json file.

You can now right-click a task> Bindings> and select a stage to include a gulp task to execute during that stage. I have added the less task to execute during the “Before Build” stage.

When we re-build our project you can see the gulp tasks executing and the output like below in Task Runner Explorer. It may take some time to execute the tasks so wait until all your task are completed.

Once complete, gulp would have compiled the less files and minimized into the app.css file, and placed the output files in the destination folder as seen below.

Something more

If you need reference the less file in the npm package like me. You can do something like below. 

Let me take antd as an example.

Add the npm package you want to reference.

npm install antd

Add the following package.

npm install --save-dev less-plugin-npm-import

And modify the gulpfile.js file like something below.

/// <binding BeforeBuild='less' />

var gulp = require('gulp'),

    cleanCss = require('gulp-clean-css'),

    less = require('gulp-less'),

    concat = require("gulp-concat"),

    npmImport = require("less-plugin-npm-import"),

    autoprefixer = require("gulp-autoprefixer");

gulp.task('less', function () {

    return gulp

        .src([

            '**/*.less',

            '!node_modules/**'

        ])

        .pipe(less({

            javascriptEnabled: true,

            plugins: [new npmImport({ prefix: '~' })]

        }))

        .pipe(concat('app.css'))

        .pipe(autoprefixer("last 2 version", "ie11", "safari 10"))

        .pipe(cleanCss({ compatibility: '*' }))

        .pipe(gulp.dest('wwwroot/css'));

});

Then add the references in the less file and use the defined styles.

@import '~antd/es/style/themes/default.less';