14

I have created MVC application. When I publish the application on Azure with release option, all css and js file load in a single bundle in page. (Open view source of page then displays a single link for css).

When I publish a site with Debug option in publish profile then all CSS load individual.

My problem is when publish site with release option theme not load correctly, but with debug option theme loads correctly. I want to publish my application with Release option only. If anyone face this issue before and get any solution then please help me.

mmpatel009
  • 921
  • 4
  • 11
  • 25
  • Can you explain what you mean by `theme not load correctly`. What should happen and what actually happens. – Colin Bacon Jul 18 '14 at 10:59
  • CSS style not apply correctly, so button, table, etc... not looks perfectly – mmpatel009 Jul 18 '14 at 11:40
  • What is the name of your bundle? Can you post the code for this please. – Colin Bacon Jul 18 '14 at 11:53
  • 1
    After trying to figure out this problem for a while this issue really seems to be a big bug with asp.net mvc in general. I can't imagine this problem wouldn't be an issue with EVERYONE who wasn't bundling. – Luminous Aug 11 '15 at 20:05
  • @Luminous - I agree. It seems completely negligent of MS to include a bundling facility that doesn't work with, for instance, bootstrap, and then just hide that fact, carefully constructing their samples so they don't reveal the problem. – Andy Jul 29 '16 at 10:37

1 Answers1

26

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.
Sean Amos
  • 2,260
  • 19
  • 13
  • the UrlRewritingCssPostProcessor is definitely the best way - however I found an issue with it that if your URL has been created using something like `background: ~url('@{url}/something.jpg');` in a mixin then it doesn't rewrite it - so I had to use method #2 for those – Simon_Weaver Jul 23 '15 at 20:52
  • I confirm that also in my case the BundleTransformer solve deninitely the problem. Many thanks. – Lorenzo Melato Aug 05 '15 at 13:20
  • I have been searching for this quite a while. I had probleme with img paths in css files when debug flag is set to true in web.config. BundleTransformer solves the issue nicely.Thx @Sean – fxdx May 20 '20 at 22:28