43

Ok, so I've created a new ASP.Net 5/MVC 6 project in Visual Studio 2015 Preview. In keeping with our current method of doing things, for styling I want to use .less files. Creating the files is straightforward, but Web Essentials no longer compiles them.

So my question is this: what precisely do I need to do to get my .css files generated when I save the .less files?

Based on my adventures getting Typescript to work nicely, I will have to use Grunt to accomplish this task, but I am brand-new to Grunt and so I'm not sure how one would do it?

Please help!

2
  • Also, I'm working through this myself, so if I successfully do so, I'll update this with a step-by-step answer.
    – Maverick
    Jan 2, 2015 at 0:10
  • This is an excellent guide on how to use Grunt and Bower in VS2015 asp.net/vnext/overview/aspnet-vnext/… Feb 6, 2015 at 15:36

3 Answers 3

42

With VS 2015 Web Essential is split into multiple extensions you can download the Web Compiler extension from here and it also has details on how to use it.

It is certainly not elegant as it used to be, but if you are using existing project and want to use a compiler for LESS then this may do the basic job.

3
  • 7
    This is an order of magnitude less complicated than the gruntfile/package.json solution and works great!
    – nuander
    Aug 17, 2015 at 20:07
  • This has been available since RTM of VS2015 (but wasn't available when this question was asked) - but it's only recently begun to correctly compile .less files (it was using an incomplete and slightly broken compiler before). Now that I understand it, I certainly prefer to use Grunt or Gulp, but Web Compiler is a solid option also :).
    – Maverick
    Aug 19, 2015 at 2:08
  • The answer marked "as the solution" is vastly more complicated than this. Just download the extension installer, reboot visual studio, and you're done. This should be the marked answer.
    – Porschiey
    Jan 10, 2017 at 0:48
40

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.

7
  • I have no package.json or anything that can be described as "under dependencies". Are there some initial steps that were missed in this post?
    – braks
    Oct 7, 2015 at 5:24
  • @braks - the package.json file is created as soon as you create a ASP.Net 5/MVC 6 app (as mentioned in the question). However, you can just add one yourself (the template name in the Add-New Item... dialog is NPM configuration file under Web/General.
    – Maverick
    Oct 7, 2015 at 5:59
  • I've since found out that this only works on new VS2015 projects. stackoverflow.com/questions/32716983/…
    – braks
    Oct 7, 2015 at 23:26
  • @braks - that's not the case. I'm currently using a solution made in VS2012. It's an MVC5 (obviously was MVC4 when it was originally made) app and I have added a package.json file and I use gulp to compile my .less files. Obviously if you want an MVC6 app, you'll need to create a new project.
    – Maverick
    Oct 7, 2015 at 23:59
  • 1
    One thing missing in Step1 that got me scratching my head for good couple of minutes is that you also might need to add "grunt": "~0.4.5" to your dependencies
    – Pinny
    Mar 11, 2016 at 1:34
8

(Note: there is now a new question asked here directly concerning sass. I tried to alter the question and tags in this question to include sass, but someone didn't allow it.)

I would like to add the answer to the same question for sass (.scss). The answer is so related I think these may best be combined as two answers in this same post (if you disagree, please let me know; else, we might add "or sass" in the post title?). As such, see Maverick's answer for some fuller details, here's the nutshell for sass:

(Pre-step for Empty Projects) If you started with an empty project, first add Grunt and Bower:

Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)

package.json:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

(FYI: grunt-contrib-sass link)

Then:

Dependencies -> right-click NPM -> Restore Packages.

gruntfile.js

1) Add or make sure these three lines are registered near the bottom (as NPM tasks):

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

2) Again in gruntfile.js, add init configurations, something like the following.

{ Caveat: I am no expert on such configurations. I found the sass configuration on an excellent blog post some time ago that I can't locate at this time in order to give credit. The key was I wanted to find all files in the project within a certain folder (plus descendants). The following does that (notice "someSourceFolder/**/*.scss", and see important related note here). }

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

Now follow the instructions for Task Runner Explorer as given in the other answer. Make sure to close and reopen project. It seems you have to run (double click) 'watch' (under 'Tasks') every time the project is started to get the watch watching, but then it works on subsequent saves.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.