Bundling css even if using @import

Question

I'm developing an application in C# and Asp.Net MVC. I have various css files one called base.css which I then import into other css files using @import rule as:

@import url('base.css');

Then I bundle my css files to minimise them as:

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
                  ... more css files

So my question is do I have to bundle base.css even if I'm importing it into a different css? Because if I don't bunble it then the styling doesn't work as required.

Answer 1

Because the MVC Bundler creates an entirely new file in a potentially different location (see the full path in your bundle name), the location of those import statements now becomes inaccurate.

What you can do instead is to create a separate CSS file (or static declaration on your _Layout page that includes only those import statements), and include that outside of any bundle.