CODEWITHSUNDEEP
cssasp.net-mvclessbundle
André Haupt
André Haupt

Reputation: 3514

BundleTransformer: CSS not bundled through @import directive

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.

Upvotes: 2

Views: 461

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

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.

Upvotes: 2

Related Questions