Why is my CSS bundling not working with a bin deployed MVC4 app

Question

I have bin deployed an MVC4 application to my hosting provider  based on advice given here and one or two on-the-fly fixes  but the most immediately apparent problem is that the bundling for css doesn t work  When I replace the bundle ref with explicit file refs  my css works again   I am using a standard MVC4 RTM project template from VS2012  The provider is running IIS 7 5 and ASP NET 4  and my previous MVC3 version of the same app worked fine  I am guessing I have grabbed a dependency somewhere of too low a version  and this might also contribute to my area based action link problem   Technical symptoms are   The line  Styles Render    Content css   renders as  lt link href   Content css v   rel  stylesheet   gt

User · Answer

With Visual Studio 2015 I found the problem was caused by referencing the .min version of a javascript file in the BundleConfig when debug=true is set in the web.config.

For example, with jquery specifying the following in BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));

resulted in the jquery not loading correctly at all when debug=true was set in the web.config.

Referencing the un-minified version:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

corrects the problem.

Setting debug=false also corrects the problem, but of course that is not exactly helpful.

It is also worth noting that while some minified javascript files loaded correctly and others did not. I ended up removing all minified javascript files in favor of VS handling minification for me.

User · Answer

As an addendum to the existing answers  none of which worked for me I found my solution HERE    https   bundletransformer codeplex com discussions 429707  The solution was to    right click the  less files in visual studio Select properties   Mark the Build Action as Content Redeploy   I did NOT need to remove extensionless handlers  as can be found in other solutions on the internet    I did NOT have to add the  lt add name  BundleModule  type  System Web Optimization BundleModule    gt  web config setting   Hope this helps

User · Answer

i had the same problem   i just convert     Styles Render    Content css   and  Scripts Render    bundles modernizr   to       Styles Render   Content css        Scripts Render   bundles modernizr     and its worked  just dont forget to convert       Scripts Render    bundles jquery        Scripts Render    bundles bootstrap   to       Scripts Render   bundles jquery        Scripts Render   bundles bootstrap     have nice time

User · Answer

The CSS and Script bundling should work regardless if  NET is running 4 0 or 4 5  I am running  NET 4 0 and it works fine for me  However in order to get the minification and bundling behavior to work your web config must be set to not be running in debug mode    lt compilation debug  false  targetFramework  4 0  gt    Take this bundle for jQuery UI example in the  Layout cshtml file    Styles Render    Content themes base css     If I run with debug  true  I get the following HTML    lt link href   Content themes base jquery ui core css  rel  stylesheet   gt   lt link href   Content themes base jquery ui resizable css  rel  stylesheet   gt   lt link href   Content themes base jquery ui selectable css  rel  stylesheet   gt   lt link href   Content themes base jquery ui accordion css  rel  stylesheet   gt   lt link href   Content themes base jquery ui autocomplete css  rel  stylesheet   gt   lt link href   Content themes base jquery ui button css  rel  stylesheet   gt   lt link href   Content themes base jquery ui dialog css  rel  stylesheet   gt   lt link href   Content themes base jquery ui slider css  rel  stylesheet   gt   lt link href   Content themes base jquery ui tabs css  rel  stylesheet   gt   lt link href   Content themes base jquery ui datepicker css  rel  stylesheet   gt   lt link href   Content themes base jquery ui progressbar css  rel  stylesheet   gt   lt link href   Content themes base jquery ui theme css  rel  stylesheet   gt    But if I run with debug  false   I ll get this instead    lt link href   Content themes base css v myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01  rel  stylesheet   gt    This is a feature so you can easily debug problems with your Script and CSS files  I m using the MVC4 RTM   If you think it might be an MVC dependency problem  I d recommend going into Nuget and removing all of your MVC related packages  and then search for the Microsoft AspNet Mvc package and install it  I m using the most recent version and it s coming up as v 4 0 20710 0  That should grab all the dependencies you need   Also if you used to be using MVC3 and are now trying to use MVC4 you ll want to go into your web config s  and update their references to point to the 4 0 version of MVC  If you re not sure  you can always create a fresh MVC4 app and copy the web config from there  Don t forget the web config in your Views Areas folders if you do   UPDATE  I ve found that what you need to have is the Nuget package Microsoft AspNet Web Optimization installed in your project  It s included by default in an MVC4 RTM app regardless if you specify the target framework as 4 5 or 4 0  This is the namespace that the bundling classes are included in  and doesn t appear to be dependent on the framework  I ve deployed to a server that does not have 4 5 installed and it still works as expected for me  Just make sure the DLL gets deployed with the rest of your app

User · Answer

I had the same problem and it turned out to be a stupid mistake  the css files were not included in the project so they weren t published  make sure you view all files in the solution and add them to the project

User · Answer

You need to add this code in your shared View      Scripts Render    bundles plugins          lt script src   Content plugins jQuery jQuery-2 1 4 min js  gt  lt  script gt       lt  -- jQuery UI 1 11 4 -- gt       lt script src  https   code jquery com ui 1 11 4 jquery-ui min js  gt  lt  script gt       lt  -- Kendo JS -- gt       lt script src   Content kendo js kendo all min js  type  text javascript  gt  lt  script gt       lt script src   Content kendo js kendo web min js  type  text javascript  gt  lt  script gt       lt script src   Content kendo js kendo aspnetmvc min js  gt  lt  script gt       lt  -- Bootstrap 3 3 5 -- gt       lt script src   Content bootstrap js bootstrap min js  gt  lt  script gt       lt  -- Morris js charts -- gt       lt script src  https   cdnjs cloudflare com ajax libs raphael 2 1 0 raphael-min js  gt  lt  script gt       lt script src   Content plugins morris morris min js  gt  lt  script gt       lt  -- Sparkline -- gt       lt script src   Content plugins sparkline jquery sparkline min js  gt  lt  script gt       lt  -- jvectormap -- gt       lt script src   Content plugins jvectormap jquery-jvectormap-1 2 2 min js  gt  lt  script gt       lt script src   Content plugins jvectormap jquery-jvectormap-world-mill-en js  gt  lt  script gt       lt  -- jQuery Knob Chart -- gt       lt script src   Content plugins knob jquery knob js  gt  lt  script gt       lt  -- daterangepicker -- gt       lt script src  https   cdnjs cloudflare com ajax libs moment js 2 10 2 moment min js  gt  lt  script gt       lt script src   Content plugins daterangepicker daterangepicker js  gt  lt  script gt       lt  -- datepicker -- gt       lt script src   Content plugins datepicker bootstrap-datepicker js  gt  lt  script gt       lt  -- Bootstrap WYSIHTML5 -- gt       lt script src   Content plugins bootstrap-wysihtml5 bootstrap3-wysihtml5 all min js  gt  lt  script gt       lt  -- Slimscroll -- gt       lt script src   Content plugins slimScroll jquery slimscroll min js  gt  lt  script gt       lt  -- FastClick -- gt       lt script src   Content plugins fastclick fastclick min js  gt  lt  script gt       lt  -- AdminLTE App -- gt       lt script src   Content dist js app min js  gt  lt  script gt       lt  -- AdminLTE for demo purposes -- gt       lt script src   Content dist js demo js  gt  lt  script gt       lt  -- Common -- gt       lt script src   Scripts common common js  gt  lt  script gt       lt  -- Render Sections -- gt       RenderSection  scripts   required  false       RenderSection  HeaderSection   required  false

User · Answer

To add useful information to the conversation  I came across 404 errors for my bundles in the deployment  it was fine in the local dev environment    For the bundle names  I including version numbers like such   bundles Add new ScriptBundle    bundles jquerymobile 1 4 3   Include           On a whim  I removed all the dots and all was working magically again   bundles Add new ScriptBundle    bundles jquerymobile143   Include           Hope that helps someone save some time and frustration

User · Answer

try this        System Web Optimization Styles Render    Content css        System Web Optimization Scripts Render    bundles modernizr     It worked to me  I m still learning  and I ve not figured it out yet why it is happening

User · Answer

I encountered the same issue with CSS on a live environment  I followed all of the advise here and investigated how the bundling works behind the scene  This lead me to request that the  Net cache was cleared  I didn t have access to the app servers  which caused the bundling to start working on the app servers  However  when accessing the site via a load balancer with a CDN configured  although the bundle identifier was updated in the url  the bundle contained the old CSS  Simply flushing the CDN resolved the issue   I hope this goes some way to helping some one else who may encounter this

User · Answer

One of my css files had an     character in the file name which caused issues   Renamed your style css to yourstyle css

User · Answer

Omitting runAllManagedModulesForAllRequests  true  also worked for me  Add the following configuration in web config    lt modules gt     lt remove name  BundleModule    gt     lt add name  BundleModule  type  System Web Optimization BundleModule    gt   lt  modules gt    runAllManagedModulesForAllRequests will impose a performance hit on your website if not used appropriately  Check out this article

User · Answer

I know this is an old issue  but people may still face this   The following checks if the BundleModule exists in web config and loaded  and sets EnableOptimizations based on its existance   This way wether it is available or not  the css js references will work fine  In other words    If BundleModule is available  the bundeling optimization will be enabled  If BundleModule is not available  the bundeling optimization will be disabled and automatically the full references will be used instead    Code   public static void RegisterBundles BundleCollection bundles          bundeling code here                 bundeling code here     bool bundelingModuleIsAvailable   false     try           bundelingModuleIsAvailable   HttpContext Current ApplicationInstance Modules AllKeys Contains  BundleModule             catch        if   bundelingModuleIsAvailable         System Diagnostics Debug WriteLine  WARNING   optimization bundle is not added to Web config         BundleTable EnableOptimizations   bundelingModuleIsAvailable  amp  amp   Debug CheckIsRunning         Debug CheckIsRunning is optional  incase you want to disable optimization when debugging yourself    BundleTable EnableOptimizations   true     private bool Debug CheckIsRunning      Check if debug is running     string moduleName   System Diagnostics Process GetCurrentProcess   MainModule ModuleName      return  moduleName Contains  iisexpress exe      moduleName Contains   vshost      moduleName Contains  vstest executionengine      moduleName Contains  WebDev WebServer

User · Answer

css names must be consistent   Names of jqueryUI css are not   jquery ui XXX  in Contents themes base folder     so it should be    wrong               bundles Add new StyleBundle    Content themes base css   Include                                         Content themes base jquery ui core css                                          Content themes base jquery ui resizable css                                          Content themes base jquery ui selectable css                                          Content themes base jquery ui accordion css                                          Content themes base jquery ui autocomplete css                                          Content themes base jquery ui button css                                          Content themes base jquery ui dialog css                                          Content themes base jquery ui slider css                                          Content themes base jquery ui tabs css                                          Content themes base jquery ui datepicker css                                          Content themes base jquery ui progressbar css                                          Content themes base jquery ui theme css       correct                 bundles Add new StyleBundle    Bundles themes base css   Include                                         Content themes base core css                                          Content themes base resizable css                                          Content themes base selectable css                                          Content themes base accordion css                                          Content themes base autocomplete css                                          Content themes base button css                                          Content themes base dialog css                                          Content themes base slider css                                          Content themes base tabs css                                          Content themes base datepicker css                                          Content themes base progressbar css                                          Content themes base theme css       I tried in MVC5 and worked successfully

User · Answer

Just for history   Check that all mentioned less css files in bundle have Build Action    Content     There is no error if some files from bundle missing on destination server

User · Answer

Another thing to consider is the references cannot have the same name  For example  if you have jQuery UI in the libraries directory  and bundle its JavaScript file like so   bundles Add new ScriptBundle    libraries   Include    libraries jquery-ui jqyery-ui js       and then try to bundle its CSS files like so   bundles Add new StyleBundle    libraries   Include    libraries jquery-ui jqyery-ui css           it will fail  They have to have unique names  So do something like ScriptBundle    libraries js      and ScriptBundle    libraries css      or whatever

User · Answer

This solved my issue  I have added these lines in  layout cshtml     Scripts Render    bundles plugins      lt script src   Content plugins jQuery jQuery-2 1 4 min js  gt  lt  script gt   lt  -- jQuery UI 1 11 4 -- gt   lt script src  https   code jquery com ui 1 11 4 jquery-ui min js  gt  lt  script gt   lt  -- Kendo JS -- gt   lt script src   Content kendo js kendo all min js  type  text javascript  gt  lt  script gt   lt script src   Content kendo js kendo web min js  type  text javascript  gt  lt  script gt   lt script src   Content kendo js kendo aspnetmvc min js  gt  lt  script gt   lt  -- Bootstrap 3 3 5 -- gt   lt script src   Content bootstrap js bootstrap min js  gt  lt  script gt   lt  -- Morris js charts -- gt   lt script src  https   cdnjs cloudflare com ajax libs raphael 2 1 0 raphael-min js  gt  lt  script gt   lt script src   Content plugins morris morris min js  gt  lt  script gt   lt  -- Sparkline -- gt   lt script src   Content plugins sparkline jquery sparkline min js  gt  lt  script gt   lt  -- jvectormap -- gt   lt script src   Content plugins jvectormap jquery-jvectormap-1 2 2 min js  gt  lt  script gt   lt script src   Content plugins jvectormap jquery-jvectormap-world-mill-en js  gt  lt  script gt   lt  -- jQuery Knob Chart -- gt   lt script src   Content plugins knob jquery knob js  gt  lt  script gt   lt  -- daterangepicker -- gt   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 10 2 moment min js  gt  lt  script gt   lt script src   Content plugins daterangepicker daterangepicker js  gt  lt  script gt   lt  -- datepicker -- gt   lt script src   Content plugins datepicker bootstrap-datepicker js  gt  lt  script gt   lt  -- Bootstrap WYSIHTML5 -- gt   lt script src   Content plugins bootstrap-wysihtml5 bootstrap3-wysihtml5 all min js  gt  lt  script gt   lt  -- Slimscroll -- gt   lt script src   Content plugins slimScroll jquery slimscroll min js  gt  lt  script gt   lt  -- FastClick -- gt   lt script src   Content plugins fastclick fastclick min js  gt  lt  script gt   lt  -- AdminLTE App -- gt   lt script src   Content dist js app min js  gt  lt  script gt   lt  -- AdminLTE for demo purposes -- gt   lt script src   Content dist js demo js  gt  lt  script gt   lt  -- Common -- gt   lt script src   Scripts common common js  gt  lt  script gt   lt  -- Render Sections -- gt

User · Answer

I had this issue while adding some packages from nuget and forgot to do an update  So first do an update of all packages installed in the project  Update-Package   In the Global asax cs add the following  BundleTable EnableOptimizations   true

User · Answer

UPDATE 11 4 2013   The reason why this happens is because you have  js or  css at the end of your bundle name which causes ASP NET to not run the request through MVC and the BundleModule   The recommended way to fix this for better performance is to remove the  js or  css from your bundle name   So  bundle myscripts js becomes  bundle myscripts  Alternatively you can modify your web config in the system webServer section to run these requests through the BundleModule  which was my original answer    lt modules runAllManagedModulesForAllRequests  true  gt     lt remove name  BundleModule    gt     lt add name  BundleModule  type  System Web Optimization BundleModule    gt   lt  modules gt    Edit  I also noticed that if the name ends with  css   without the dot   that is a problem as well  I had to change my bundle name from  DataTablesCSS  to  DataTablesStyles  to fix my issue

User · Answer

Just to clarify a few things  System Web Optimization  aka Bundling Minification  will work against 4 0   It is not depending on anything in 4 5  so there should be no problems there   If script bundling is working  and its only an issue with CSS  perhaps the issue is with relative URLs     I d first look at the rendered page and see if you are getting references to the CSS bundle  i e  something like    lt link href   app Content css v oI5uNwN5NWmYrn8EXEybCI  rel  stylesheet   gt    If you are  then bundling is working  but something inside your CSS bundle is messed up   Usually this is due to relative URLs inside your CSS bundle being incorrect  i e  if your images live under   Content  but you name your bundle   bundles css  the browser will incorrectly look for images under   bundles   Also  the default behavior is to disable bundling and minification when debug true  So  if you do want optimizations enabled even when debug true  you will need to force   BundleTable EnableOptimizations   true   Updated  With the new info that v     that means the bundle was empty  you should verify that you are adding files to the bundle correctly  and that it found them   How are you including files to the bundle

User · Answer

I was facing this problem while deploying the code in Azure websites  it did worked when I deployed build from visualstudio com and wasn t when I tried to publish the build from visual studio 2013  the main problem was CSS Minification  I totally agree with 1st response to this question  but thought of sharing solution that worked for me  may be it will help you in fixing it   basically when we deploy through VSO it generates minification files for css  js by kicking in system web Optimization  but when we do publish build from VS 2013 we have to take care of the below  bundling-and-minification 1  make sure the folder structure and your bundler naming convention should be different  something like this   bundles Add new StyleBundle    Content materialize mcss   Include                       Content  materialize css materialize css       2  add at the bottom of your bundleconfig definition  public static void RegisterBundles BundleCollection bundles      bundles Add new ScriptBundle    bundles jquery   Include                  Scripts jquery- version  js            Code removed for clarity     BundleTable EnableOptimizations   true      3  make sure to add debug false in web config  when you start local debuging VS2013 will give you a popup saying that you need to make sure to putting it back before deploying into prod  that itself explains much    lt system web gt     lt compilation debug  true    gt     lt  -- Lines removed for clarity  -- gt   lt  system web gt

[asp.net-mvc] Why is my CSS bundling not working with a bin deployed MVC4 app?

Examples related to asp.net-mvc

Examples related to asp.net-mvc-4

Examples related to asp.net-optimization