2

We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.

This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the @import CSS at-rule.

Sample in our root LESS file:

/* Import core LESS files */
@import "../core.less";

/* Import jQuery UI stuff*/
@import "../themes/base/core.css";
@import "../themes/base/resizable.css";
@import "../themes/base/accordion.css";
@import "../themes/base/tabs.css";

/* Import more LESS files */
@import "../morestyles.less";

If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.

Chrome Network Screen Capture

Naturally, we could simply include these CSS files in the BundleConfig and remove the @import calls, but I was just curious to see if there is a way to have them bundled together.

André Haupt
  • 3,294
  • 5
  • 32
  • 57
  • http://stackoverflow.com/questions/9593254/mvc4-less-bundle-import-directory .. might help. http://www.nuget.org/packages/BundleTransformer.Less –  May 04 '15 at 10:16
  • @gerdi: Thanks, but we are already using the BundleTransformer.Less package. Bundling would not have worked at all if we didn't. – André Haupt May 04 '15 at 11:34
  • Ah right, sorry about that –  May 04 '15 at 11:42

1 Answers1

2

You should read http://lesscss.org/features/#import-options.

In your code @import "../themes/base/tabs.css"; compiles into @import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.

You can use the inline option:

@import (inline) "../themes/base/tabs.css";

The above inlines the code from tabs.css into your project file without processing it.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224