Css/Js Bundle in Single File in MVC When Publish with Release Option

CSS/JS bundle in single file in mvc when publish with release option

I have experienced this before when using bundling.

Say for instance your css file is located at: /Content/css/css.css

This css file then makes a reference to another file, or for example an image at /Content/images/image1.png via url('../images/image1.png').

You then set up your css bundle @ /bundles/css.

All appears great in debug mode. However, when you set <compilation debug="false" .... in your web.config, suddenly the references made in the css file breaks. If you open your console in Firebug/Chrome dev tools and check the network tabs, you'll see resources failing to load, from an incorrect URL.

This happens because when debug mode is off, all the files are bundled and minified like they would be in production. In this case, the CSS file would be bundled and served from the URL /bundles/css. This results in the relative URL reference breaking. Where it once referenced /Content/images/image1.png, it now references /images/image1.png.

You have a few options to solve this:

1. Serve your bundled css files from the same folder as the actual css files. eg. /Content/css/cssbundle. This can become very tedious quickly.
2. Change all relative references in your css files to absolute references. eg. ../images/image1.png would become /Content/images/image1.png. This does mean you can't use a lot third party CSS bundled out of the box, you would have to check/change relative references if you wanted to bundle them.
3. Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.

   The main differences of StyleTransformer and ScriptTransformer classes from a standard implementations: ability to exclude unnecessary assets when adding assets from a directory, does not produce the re-minification of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (by using UrlRewritingCssPostProcessor), etc.

I personally recommend 3 as it is the easiest to maintain long term.

CSS/JS bundle in single file in mvc when publish with release option

I have experienced this before when using bundling.

Say for instance your css file is located at: /Content/css/css.css

This css file then makes a reference to another file, or for example an image at /Content/images/image1.png via url('../images/image1.png').

You then set up your css bundle @ /bundles/css.

All appears great in debug mode. However, when you set <compilation debug="false" .... in your web.config, suddenly the references made in the css file breaks. If you open your console in Firebug/Chrome dev tools and check the network tabs, you'll see resources failing to load, from an incorrect URL.

This happens because when debug mode is off, all the files are bundled and minified like they would be in production. In this case, the CSS file would be bundled and served from the URL /bundles/css. This results in the relative URL reference breaking. Where it once referenced /Content/images/image1.png, it now references /images/image1.png.

You have a few options to solve this:

1. Serve your bundled css files from the same folder as the actual css files. eg. /Content/css/cssbundle. This can become very tedious quickly.
2. Change all relative references in your css files to absolute references. eg. ../images/image1.png would become /Content/images/image1.png. This does mean you can't use a lot third party CSS bundled out of the box, you would have to check/change relative references if you wanted to bundle them.
3. Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.

   The main differences of StyleTransformer and ScriptTransformer classes from a standard implementations: ability to exclude unnecessary assets when adding assets from a directory, does not produce the re-minification of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (by using UrlRewritingCssPostProcessor), etc.

I personally recommend 3 as it is the easiest to maintain long term.

Bundle.config confused about debug and release and minification

Okay, here are a few things I discovered about this:

When in debug mode, and you check the web.config:

 <system.web>
     <compilation debug="true">

then all your javascripts will be preserved within the bundle virtual directory (they will not merge into a single file and they will not be minified).

When switching to release mode, then switch to:

 <system.web>
     <compilation debug="false">

so that all your javascript files within a bundle are minified and compiled into a single file, this reduces round trips to the network. Please note, one file is created for each bundle.

If you want to get the optimizations enabled regardless of whether or not you're in debug mode, then set BundleTable.EnableOptimizations = true, which forces the minification and bundling. If you leave this out of the code, then BundleConfig will look at the web.config instead.

RegisterBundles(BundleCollection bundles) method in BundleConfig.cs, you put in:

    BundleTable.EnableOptimizations = true;
    bundles.UseCdn = true;
    var cssTransformer = new CssTransformer();
    var jsTransformer = new JsTransformer();
    var nullOrderer = new NullOrderer();

and this is how you'd add in javascript files:

    var jqueryBundle = new CustomScriptBundle("~/bundles/jquery");
    jqueryBundle.IncludeDirectory("~/Scripts/JQuery", "*.js");
    jqueryBundle.Transforms.Add(jsTransformer);
    jqueryBundle.Orderer = nullOrderer;
    bundles.Add(jqueryBundle);

Couple notes:

• Bundle.config does ignore all min files. I added File.min.js, and File.js, and it ignores File.min.js, and it minifies File.js and bundles it with other files included in the bundle. I checked because when I minified one of the files myself, all the variable names (not the structured code) compared to what was downloaded in my website was completely different than the min file I included in the project. So, this verifies that min files are not needed in your project.
• Bundle.config ignores minifying any files named like this.. "File.debug.js", this will never be minified, in fact, it will never be included in your project in release. I found this out after realizing one of my javascript files never making it to the site.

• 403 errors will occur if you use "Content/css" as your virtual directory of where your bundle will appear, this needs to be changed to "bundles/css" and the 403 will go away like so (using razor):

  @Styles.Render("~/bundles/css")

meaning if you have this in your code (notice where ~/bundle/css" is, this will be where your css files will go):

BundleTable.EnableOptimizations = true;

bundles.UseCdn = true;
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
#region CSS Styles
var cssBundle = new CustomStyleBundle("~/bundles/css");
cssBundle.IncludeDirectory("~/Content/CSS", "*.css")
         .IncludeDirectory("~/Content/CSS/Override", "*.css");
cssBundle.Transforms.Add(cssTransformer);
cssBundle.Orderer = nullOrderer;
bundles.Add(cssBundle);
#endregion

• If your css has a relative path, this may also be changed, so look for 404 errors
• Not all minified files will behave the way you want them to.. so you will have to ultimately do a semi bundled version (or you do not have to minify any js at all, and just bundle them)

But if you want to continue on doing the minified javascript and you do not know which files is throwing the error, the following steps will help:

1. Bundle everything
2. Open your browser and find all the sources of your bundled minified js
3. Copy working bundled js into another file
4. start manually inserting javascript using the tags instead of bundleconfig.cs, and keep adding them one by one until one fails.. if that fails.. then you'd have to use the un-minified version of that project
5. repeat step 3-4

I wish there was better documentation of bundle.config at the time of this writing, but I found this entire experience to be severely disappointing.

MVC Bundle not working with Release Configuration (Debug is False), CSS and JS not loading

Check that the files are included correctly in the solution to be deployed (right click on the file and select properties).

CSS & JS files not rendered when deploy of ASP.Net MVC application on IIS 8 (Windows 8)

I solved the problem!

Thanks to Bundling & minification not applying css & js using Asp.net 4.0 C# !

All I had to do is to change in my bundleConfig.cs file the name from :

  bundles.Add(new StyleBundle("~/Content/Theme").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/css/bootstrap-admin-theme.css",
            "~/Content/Theme/css/site.css"));

to

  bundles.Add(new StyleBundle("~/Content/allcss").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/style/bootstrap-admin-theme.css",
            "~/Content/Theme/style/site.css"));

MVC and Less bundles - not working in Release deployed to Azure

It turns out I had two issues. The normalize.css file was not included in the project, and therefore not being deployed to Azure. The Less file was returning 404 in the Azure environment, but once it was set to Build Action="Content" it started working. I am not sure why this second thing worked, so I have posted another question.

---

Related Topics