When publishing site in VS @import "theme.css" isn't working

Question

I have a site that relies on some of the css styling the the jquery ui theme.css.

When I run my project locally, this works fine, but when I publish and deploy, those particular styles aren't being picked up.

When I inspect a dialog close button, for example, locally, it shows the standard cross image, but on the published site, it says "Close" and doesn't have the styling from theme.css

I have checked and theme.css is included in the directory structure in the normal place.

When I look at the minimised css file, it starts @import"base.css";@import"theme.css"; which comes from the Content/themes/base/all.css, but obviously it isn't reading these.

Is there something I need to do to include these properly on the published site?

Thanks

Edit: obviously I can just reference all the jqueryui css files individually in my bundle, but it would be useful to use the @include directive.

Answer 1

This is my story...

There were a few issues. The first and most simple was that an image I needed was in the file system (and accessible when running in debug mode) but did not exist in the project, so it wasn't deployed. This is a good explanation of how to do it: How do I add an existing directory tree to a project in Visual Studio?

My major issue was related to bundling (which I never took much notice of)

The thing is bundling does not happen in debug mode (i.e. when you run locally)

Bundling does happen when you deploy a release version.

So your app runs sweet until you deploy it.

If you want to force your debug version to perform bundling, so you can discover these issues before deployment (I will be doing this from now on), add this line inside your RegisterBundles

public static void RegisterBundles(BundleCollection bundles)
    BundleTable.EnableOptimizations = true; 

Conversely, if you are over trying to fix it and just want to see your shiny web app functioning, add this line instead before deployment:

BundleTable.EnableOptimizations = false; 

Which will disable bundling altogether and make your deployed app work like your debug app. Keep in mind bundling is there for performance so you'll probably take a performance hit.

Anyway...........

I read a lot about bundling but I couldn't find specifics on the meaning of the parameters to ScriptBundle, particularly the first parameter.

After a while I worked out that this:

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

means:

Take the files

• ~/Scripts/bootstrap.js
• ~/Scripts/respond.js

And bundle them up (minify and squish them into a single GET) then put them in the actual web folder ~/bundles/bootstrap

So not only is ~/bundles/bootstrap a key that you use to identify the bundle (in the call to bundle and in your view), it is also a physical path on the web server where the bundle is stored and called from

Not knowing what this thing was for, I had a call like this:

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/themes/base/all.css",
                  "~/Content/select2.css"
                  ));

THE PROBLEM WAS: ~/Content/css is an actual physical folder that already exists so the bundling was somehow confused. Changing this first parameter to a different path fixed it.

So... if you have this problem do two things:

• Make sure all your StyleBundle keys (the first string in the StyleBundle call) start with ~/bundles (or something suitably unique), just to make sure that they can't possibly reference a real folder

• I also made sure that none of my referenced files were the .min file. Not sure of this made a difference but I found it on another stackexchange answer so I did it anyway.

My problem now is that I need to only include the right stylesheets in the right order in bundles.

If you bundle everything or miss out a css file or even put them in the wrong order, your bundled css will not be applied the same as your debug css and your page will be a misshapen deformed monster

For example I needed to put my site.css after bootstrap.css so that my custom site styling would override generic bootstrap styling. I also neede to use .IncludeFolder to include the entire contents of the jqueryui css folder

.. and still I have an issue that jqueryui styles reference images in a subfolder. (so it still has the incorrect relative path issue)

Answer 2

I had the same problem with the jQueryUI library in a project I'd inherited.

It was caused by this line:

bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
              "~/Content/themes/base/all.css"));

That all.css file just contained this...

@import "base.css";
@import "theme.css";

... and those @import commands seem to be the problem. They just don't work properly with bundling.

And one of those two files, base.css, was also just a list of @import commands.

My solution was to replace the bundles.Add() line with a list of all of the .css files which those @import statements were attempting to include:

bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
                "~/Content/themes/base/core.css",
                "~/Content/themes/base/accordion.css",
                "~/Content/themes/base/autocomplete.css",
                "~/Content/themes/base/button.css",
                "~/Content/themes/base/datepicker.css",
                "~/Content/themes/base/dialog.css",
                "~/Content/themes/base/draggable.css",
                "~/Content/themes/base/menu.css",
                "~/Content/themes/base/progressbar.css",
                "~/Content/themes/base/resizable.css",
                "~/Content/themes/base/selectable.css",
                "~/Content/themes/base/selectmenu.css",
                "~/Content/themes/base/sortable.css",
                "~/Content/themes/base/slider.css",
                "~/Content/themes/base/spinner.css",
                "~/Content/themes/base/tabs.css",
                "~/Content/themes/base/tooltip.css",
                "~/Content/themes/base/theme.css"));

It goes without saying, you should always refresh your "bundled" webpages in Chrome, with the Developer Options panel open, and check either the Network or Console tab for any 404 errors relating to missing bundled files.