Bundling CSS CDN

Question

I had a working site before applying minification and bundling. I did not write the original CSS. The problem stemmed from three @import url statements being used to bring in Google fonts.

In an effort to fix the problem, I decided to remove the @import url's from the relevant CSS file and add them individually in my BundleConfig.cs class. However, I cannot figure out the syntax to make this happen:

public static void RegisterBundles(BundleCollection bundles)
{
    ....
    bundles.UseCdn = true;
    var templateOriginalPath1 
        = "http://fonts.googleapis.com/css?family=Lobster";
    var templateOriginalPath2 = 
        "http://fonts.googleapis.com/css?family=Oswald:400,700,300";
    var templateOriginalPath3 
        = "http://fonts.googleapis.com/css?family
        =Ubuntu:300,400,500,700,300italic,400italic,700italic";
    ....

    bundles.Add(new StyleBundle("~/bundles/templateOriginal1",
        templateOriginalPath1));
    bundles.Add(new StyleBundle("~/bundles/templateOriginal2",
        templateOriginalPath2));
    bundles.Add(new StyleBundle("~/bundles/templateOriginal3",
        templateOriginalPath3));
}

score 0 · Accepted Answer · edited May 23 '17 at 12:34

Apparently, the syntax was correct. There is a known bug which causes the optimization framework to choke when presented with CSS style sheets which include @import url statements.

The workaround is just too much trouble to be worth it. Hopefully this will be of use to others. I saw first mention of this bug here.

You have to inspect the response headers in the Developer Tools (I use Firefox Developer Browser) to see the details of the error:

/* Minification failed. Returning unminified contents.
(1409,1): run-time error CSS1019: Unexpected token, found '@import'
(1409,9): run-time error CSS1019: Unexpected token, 
    found '"http://fonts.googleapis.com/css?family=Lobster"'
(1409,57): run-time error CSS1019: Unexpected token, found ';'
(1410,1): run-time error CSS1019: Unexpected token, found '@import'

Bundling CSS CDN

1 Answers1