Bundling less and css files together

Question

I feel like bundling should be used to group a bunch of files which you use together into one single delivery to the browser. This would mean for example for my root style I would like to do something like the following:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css");
bundle.Transforms.Add(new LessTransform());
bundle.Transforms.Add(new CssMinify());
bundles.Add(bundle);    

But this doesn't seem to work very well with the custom transform technique for bundling less files as it looks like it pre-bundles all of the files into a single css file before passing it to the LessTransform. From what i can tell this method only works if you bundle all of your less files together.

Is there a way to get bundles to allow both less and css files in the same bundle?

Answer 1

Yes you are right, the transformer concatenates all the CSS/LESS contents before passing it along to the converter. That said, the converter should not be choking the presence of both LESS and CSS, as you can always include standard CSS within a LESS stylesheet.

The issue seems to be that you are using a StyleBundle object that already has a transformer associated. Try using a generic Bundle as I do in my config, like this:

var customStyles = new Bundle("~/bundle/style/css")
                       .Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);

As for your own answer below, the issue with the bootstrap.css file is not that the LESS transformer doesn't like it, but probably a path issue for @imports, make sure your LESS transformer uses something to ensure it resolves the proper paths to the any dependency stylesheets.

Answer 2

I believe all CSS is valid LESS (but not all LESS is valid CSS)

So having the LessTransform applied to your bootstrap css files shouldn't make any difference.

It will still bundle all files into one css file to deliver to the browser.

There might only be a performance problem during design-time .

The correct output will still be produced and caching will prevent any run-time performance issues.

Answer 3

I know this is a bit of an old post, but I've noticed something weird that may be of use to someone...

I've found that Bundle object doesn't like hyphens in the name of the css file when less files are also included. ie:

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jquery-ui.1.9.2.custom.css"
            );

Doesn't work for me, but the following does (change to jqueryui filename):

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jqueryui.1.9.2.custom.css"
            );

So, changing the filename from "~/Content/bootstrap-responsive.css" to "~/Content/bootstrapresponsive.css" could very well sort the issue for you.

Answer 4

I had a bit more of a look into this and tried using Bundle instead of StyleBundle but still had issues. I think the issue is specifically to do with the bootstrap.css file having some syntax which less doesn't like.