Showing posts with label less. Show all posts
Showing posts with label less. Show all posts

Saturday, August 18, 2012

Using Less and Twitter Bootstrap in ASP.NET MVC4

UPDATE 05/02/2013:

Changed ScriptBundle and StyleBundle to just Bundle, per Andrey Taritsyn:
Bundle Transformer it is not recommended to use together with the StyleBundle and ScriptBundle classes, because these classes already contain transformations (instances of the built-in minifiers: CssMinify and JsMinify). Use a Bundle class.

UPDATE 11/08/2012:
  1. Create a new MVC4 Internet Application
  2. Add the following Nuget Packages
  3. Rename /Content/site.css to /Content/site.less 
    • Edit BundleConfig.cs in the App_Start folder and update the css file name to site.less like so:
      bundles.Add(new var cssTransformer = new CssTransformer();
      var jsTransformer = new JsTransformer();
      var nullOrderer = new NullOrderer();
      var defaultScriptsBundle = new Bundle("~/bundles/default.js").Include(
      defaultScriptsBundle.Orderer = nullOrderer;
      var defaultStylesBundle = new Bundle("~/Content/default.css").Include("~/Content/site.less");
      defaultStylesBundle.Orderer = nullOrderer;
    • Add the following to the top of /Content/site.less in order to have access to all of the Bootstrap mixins:
      @import "less/bootstrap.less"; 
      body {
            padding-top: 60px;
            padding-bottom: 40px;
      @import "less/responsive.less"; 

    =================== THE REST OF THIS POST IS OUT OF DATE ==========

    UPDATE 8/20/2012: I've created a Nuget package that performs the steps below. I'd suggest reviewing what the package does below and then running:
    Install-Package Twitter.Bootstrap.Less.MVC4

    ASP.NET MVC4 has a great new feature that can bundle and minify your CSS and Javascript files.

    But in order to get Twitter Bootstrap to work it takes a bit more work. Here are the steps that worked for me.

    1. Create a new MVC4 Internet Application
    2. Add the following Nuget Packages
    3. Create an Infrastructure folder and add the following two files: (hat tip to this Stackoverflow question)
    4. Rename /Content/site.css to /Content/site.less 
    5. Edit BundleConfig.cs in the App_Start folder and replace the default Content/css bundle with the following:
      var css = new Bundle("~/Content/css").Include("~/Content/site.less");
      css.Transforms.Add(new LessMinify());

    6. Add the following to the top of /Content/site.less in order to have access to all of the Bootstrap mixins:
      @import "less/bootstrap.less";

    If you have "shared" .less files from other projects I found importing them in site.less right after boostrap.less to work pretty well. They'll have access to all the mixins.
    @import "less/bootstrap.less";
    @import "less/shared.less";

    The completed solution is available on Github here

    If there is a better/easier way to do this please let me know in the comments!

    Sunday, May 13, 2012

    Add support for LESS to Node.js connect-assetmanager package

    The connect-assetmanager Node.js package allows you to combine multiple javascript and CSS files into one and also do other manipulations like minification.

    It's part of Mathias Pettersson's (mape) excellent node-express-boilerplate template.

    If you're also using LESS for CSS here is some code you can add to get connect-assetmanager to process you're LESS files:

    var assetsSettings;
    assetsSettings = {
      js: {
        route: /\/static\/js\/[a-z0-9]+\/.*\.js/,
        path: "./public/javascripts/",
        dataType: "javascript",
        files: ["libs/underscore-min.js" "libs/", siteConf.uri + "/nowjs/now.js", "site.js"],
        debug: siteConf.debug,
        stale: !siteConf.debug
      css: {
        route: /\/static\/css\/[a-z0-9]+\/.*\.css/,
        path: "./public/stylesheets/",
        dataType: "css",
        files: ["libs/", "style.less"],
        debug: siteConf.debug,
        stale: !siteConf.debug,
        preManipulate: {
          "^": [
            function(file, path, index, isLast, callback) {
              var match;
              match = path.match(/\.less$/);
              if ((match != null) && match.length > 0) {
                return less.render(file, function(e, css) {
                  return callback(css);
              } else {
                return callback(file);

    The import part is the preManipulate line under css but I include my entire assetsSettings from a project to make it easier to understand.