When publishing site in VS @import "theme.css" doesn't work

This is my story ...

There were several questions. The first and easiest one was that the image I needed was on the filesystem (and available when running in debug mode) but did not exist in the project, so it was not deployed. This is a good explanation of how to do it: How to add an existing directory tree to a project in Visual Studio?

My main problem was with the bundle (which I never really paid much attention to)

The binding thing doesn't happen in debug mode (i.e. when running locally)

Linking occurs when you deploy a release version.

So your application starts up sweetly until you deploy it.

If you want to force your debug version to do grouping, you might find these issues before deploying (I will do it now), add this line to your RegisterBundles

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

      

        
        
        
      

    

Conversely, if you're trying to fix it and want to see your shiny web app perform, add this line before deploying:

BundleTable.EnableOptimizations = false; 

      

        
        
        
      

    

Which will disable the pooling entirely and make your deployed application behave like your debug application. Keep in mind that you have a performance package, so you are likely to get a performance hit.

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

I read a lot about the binding, but I could not find any specifics on the value of the parameters ScriptBundle

, especially the first parameter.

After a while, I realized that it was:

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

      

        
        
        
      

    

means:

Take files

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

And combine them (minify and squish them into one GET) then put them in the actual web folder ~/bundles/bootstrap

So not only is ~ / bundles / bootstrap the key you use to identify the bundle (in the bundle call and in your view), it is also the 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 connection was messed up somehow. Changing this first parameter to a different path fixed it.

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

• Make sure all of your StyleBundle keys (first line in the call to StyleBundle) start with ~/bundles
  
  (or something suitable uniquely) just to make sure they can't reference the actual folder

• I also made sure that none of my referenced files were a .min file. Not sure if it mattered, but I found it in another answer on stackexchange, so I did anyway.

Now my problem is that I only need to include the correct stylesheets in the correct order in the packages.

If you link everything, or miss the css file, or even put them in the wrong order, your linked css will not be applied the same way as your debug css and your page will be a warped warped monster.

For example, I needed to place my site.css after bootstrap.css so that my custom site style would override the general bootstrap style. I also need to use .IncludeFolder to include all jqueryui css folder contents

.. and still i have a problem that jqueryui styles are referring to images in a subfolder. (so it still has an incorrect relative path problem)