How to Compile Less/Sass Files in Visual Studio 2017+

How to compile Less/Sass files in Visual Studio 2017+

WebEssentials is being split up into multiple extensions. I believe the functionality you want is now in the Web Compiler extension.

If you want to do it without extensions, you could use a task runner like Gulp. See here for a walkthrough of how to integrate Gulp tasks into VS.

How to compile .less files on save in Visual Studio 2015 (preview)

So here's how to do it (compile on build and non-elegant compile on save):

Step 1

Open up your package.json file (it's in the root of your project) and add these lines:

"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"

Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions.

Step 2

Right-click on the NPM folder (under Dependencies) and click Restore Packages. This will install less and grunt-contrib-less.

Step 3

Once those packages are restored, go to your gruntfile.js file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfig

less: {
    development: {
        options: {
            paths: ["importfolder"]
        },
        files: {
            "wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
        }
    }
}

You'll also need to add this line near the end of gruntfile.js:

grunt.loadNpmTasks("grunt-contrib-less");

Step 4

Then just go to View->Other Windows->Task Runner Explorer in the menu hit the refresh icon/button, then right-click on less under Tasks and go to Bindings and tick After Build.

Hooray, now less files will compile and we (I) learned about grunt, which seems really powerful.

Step 5: Compiling on save

I still haven't got this working to my satisfaction, but here's what I've got so far:

As above, add another NPM package grunt-contrib-watch (add to package.json, then restore packages).

Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well):

watch: {
    less: {
        files: ["sourcefolder/*.less"],
        tasks: ["less"],
        options: {
            livereload: true
        }
    }
}

So you'll now have something like this in your gruntfile.js:

/// <binding AfterBuild='typescript' />
// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        watch: {
            less: {
                files: ["less/*.less"],
                tasks: ["less"],
                options: {
                    livereload: true
                }
            }
        },
        less: {
            development: {
                options: {
                    paths: ["less"]
                },
                files: {
                    "wwwroot/css/style.css": "less/style.less"
                }
            }
        }
    });

    // This command registers the default task which will install bower packages into wwwroot/lib
    grunt.registerTask("default", ["bower:install"]);

    // The following line loads the grunt plugins.
    // This line needs to be at the end of this this file.
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");
};

One can then simply set this task to run on Project Open (right-click on watch under Tasks in the Task Runner Explorer (it's under View->Other Windows in the top menu) and you're done. I would expect you'd have to close and re-open the project/solution to get this to kick in, otherwise you can manually run the task.

LESS in Web Compiler for Visual Studio 2019 stopped to work

For VS2017 and VS2019:

• Uninstall the Web Compiler extension
• Delete* the directory C:\Users\<username>\AppData\Local\Temp\WebCompiler1.12.394
• Install Web Compiler

I do not know why the "lessc" file disappeared.

* From cmd.exe:

rd /S %LOCALAPPDATA%\Temp\WebCompiler1.12.394

From a PowerShell prompt:

rm -r $env:LOCALAPPDATA\Temp\WebCompiler1.12.394

---

How I found the solution: I attempted to re-create the .vsix file from the GitHub repository for the Web Compiler extension so that I could get the lessc file; I had installed Node.js and all its associated gubbins. Trying to use the node_modules.7z generated by build.cmd in the Web Compiler files didn't work in the end because there are several deprecated things in it - I ended up with the error described in 3.10: Breaks IE Compat Option. So I thought: oh dear, it is all broken, why not just delete the directory and try the install again?

How to compile .sass files on save in Visual Studio 2015

If using Gulp + Visual Studio 2015

1. First install gulp-sass this is the package.json file

{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }

2. On the gulpfile.js

   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })

3. Now open the "Task Runner Explorer" and double click on the task: "watch-sass"
   

Now every time you save the scss the css will compile and change sass file.

Is there any method to edit SASS/LESS files online via FTP

I agree with @RobertWade that this should be part of your version control and build process. You may like to start with a simple gulp sass build process running on your server. Here's a walkthrough http://ryanchristiani.com/getting-started-with-gulp-and-sass/

---

Related Topics