WordPress MVC (WPMVC) flexibility allows developers to freely used the style language of their choice.

This article will describe shortly how to configure your WordPress MVC project to work with {less}.

Step 1: Install dependencies

The following command will install gulp-less package in your project and save it as dependency:

npm install gulp-less --save

Step 2: Modify gulpfile.js

You need to modify your gulpfile.js in order to register gulp-less and to add custom tasks for less compilations.

Require less

At the beginning of the file add this line:

var less = require('gulp-less');

The line above, will make sure gulp-less is registered and loaded.

Custom tasks

You will create two tasks:

  • less: This task will compile less files.
  • watch-less: This task will allow you to set up a watch for easier development.

The less task needs to be included in WordPress MVC compilation cycle. To do this, we will modify the configuration’s prestyles step, to make sure your custom task is included.

// --------------
// START - CUSTOM TASKS

// Add less to prestyles - WordPress MVC cycle
config.prestyles = ['sass', 'less'];

The modification above indicates that sass and less should be required in order to compile styles. This will enable WPMVC cycle to compile either of the two languages.

Following the line above, add the following:

// less task
gulp.task('less', function () {
    return gulp.src('./assets/raw/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./assets/css'));
});
// watch-less task
gulp.task('watch-less', async function() {
    gulp.watch([
        './assets/raw/less/**/*.less',
    ], gulp.series('less'));
});

The snippet above will add tasks less and watch-less.

Step 3: Compile

With gulpfile.js modified, you can compile your less assets, located in the path [project]/assets/raw/less, by running the command:

gulp dev

Less compilation will also be included when building or deploying the project.

You can watch any file changes running the command:

gulp watch-less