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.