Adding my css files inside a bundle file will not have the same effect when the same css files are rendered individually

Question

I have defined the following bundle, inside my asp.net mvc-5 web application:-

var bundle5 = new StyleBundle("~/Content/css")
               .Include("~/Content/bootstrap.css")
                    .Include("~/Content/style.css")
                     .Include("~/fonts/font-awesome.css")
                   .Include("~/Content/touchTouch.css")
                ;
            bundle5.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle5);


class NonOrderingBundleOrderer : IBundleOrderer
    {
        public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
        {
            return files;
        }
    }

and i am referencing this bundle inside the _layout view as follow:-

@Styles.Render("~/Content/css")

now this will render the below fonts, which is not what i am looking for:-

but if i render the same css files defined inside the bundle file individually as follow:-

i will get the effect i want as follow:-

now i checked the browser using F12 as seems using the two approaches i can see exactly the same css rules applies to the page.. but not sure why the final result is not the same ?

also if i split the css into two bundles as follow:-

var bundle5 = new StyleBundle("~/Content/css")
               .Include("~/Content/bootstrap.css")
                    // .Include("~/Content/style.css")
                     .Include("~/fonts/font-awesome.css")
                   .Include("~/Content/touchTouch.css")

                ;
            bundle5.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle5);
            var bundle6 = new StyleBundle("~/Content/Customcss")

                   .Include("~/Content/style.css")
                ;
            bundle6.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle6);

and render them inside the view as follow:-

@Styles.Render("~/Content/css")

    @Styles.Render("~/Content/Customcss")

the result will be correct,, so i am really confused on what is going on ? i doubt the order of the css matters in my case, because when i define the css individually it work well. so it is not related to having the style.css render after the other scripts,, because when they are render individually the style.css is second in the order and the result was correct..

EDIT

now i define the following bundle to include all the css :-

 var bundle5 = new StyleBundle("~/Content/css")
               .Include("~/Content/bootstrap.css")

                     .Include("~/fonts/font-awesome.css")
                   .Include("~/Content/touchTouch.css")
                  .Include("~/Content/style.css")
                ;
            bundle5.Orderer = new NonOrderingBundleOrderer();

            bundles.Add(bundle5);

and i reference it inside my _layout view as follow:-

 @Styles.Render("~/Content/css");

here is the generated code for the bundle :-

<link href="/Content/css?v=uEwsjHXMY4OZeiDkOmQdOIlIjQMZpRc0advYoZe5jPg1" rel="stylesheet"/>

if i click on the bundle i can see that there are some errors at the beginning of the file:-

/* Minification failed. Returning unminified contents.
(7384,1): run-time error CSS1019: Unexpected token, found '@import'
(7384,9): run-time error CSS1019: Unexpected token, found 'url(//fonts.googleapis.com/css?family=Ubuntu:400,700)'
(7385,2): run-time error CSS1019: Unexpected token, found '@import'
(7385,10): run-time error CSS1019: Unexpected token, found 'url(//fonts.googleapis.com/css?family=Oswald)'
 */
/*!

so could this be causing the problem ? now i have these lines inside my style.css:-

@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700);
 @import url(//fonts.googleapis.com/css?family=Oswald);

so could those @import causing the problem inside the bundle ? again if i include the style.css on a separate bundle i will not get any error , seems the problem will happen if i include the style.css inside a shared bundle (i mean by shared bundle as bundle that contain other css files),, so can any one adivce how i can fix this ?

Answer 1

Updated:

About the effect been different, the problem is that bundle take all css that you put on it and transform in a single css. So if you have ten css files referenced in your bundle on develop, on production you have only one archive in source files. See by yourself clicking with mouse right button on your site and seeing source code and clicking on the <link> tag of your site. This way, conflicts in css occurs.

If you had css files that override others, you'll need to do separated bundles to them and insert them in the correct order you need your effects to happen.

PS.: I'm having a similar problem and for what I could understand until now, bundle is not loading files that would be loaded by @import.

Take a look at the answer of this stack: MVC4 bundling CSS failed Unexpected token, found '@import'

Updated:

The answer of stack above is that bundles don't admit @imports, so you have to especify each of your css files in the bundle, like this:

 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"));

So, this way all css files are loaded and you doesn't have problems with @import.