Stefan Stefan - 2 months ago 17
CSS Question

CSS files missing when deploying to Azure (datepicker style works locally)

I deployed a MVC 5 Web App to Azure and saw that the datepicker theme (basic) is not loading properly.

Local datepicker:

Local datepicker

Azure datepicker:

Azure datepicker

From digging through the Azure version, I observed that the stylesheets aren't loading, although locally they are. Clearly this is the issue, but I don't know how to fix it.

BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/DatePickerReady.js",
"~/Scripts/respond.js"));

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


_Layout.cshtml:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")


....

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)


UPDATE:
Inspecting the field in which the datepicker should appear, I found that this is a minification issue:

/* Minification failed. Returning unminified contents.
(31,1): run-time error CSS1019: Unexpected token, found '@import'
(31,9): run-time error CSS1019: Unexpected token, found '"base.css"'
(32,1): run-time error CSS1019: Unexpected token, found '@import'
(32,9): run-time error CSS1019: Unexpected token, found '"theme.css"'

Answer

After finding the error (Inspect element on the Datepicker Field in the Azure-deployed Web App):

/* Minification failed. Returning unminified contents.
(31,1): run-time error CSS1019: Unexpected token, found '@import'
(31,9): run-time error CSS1019: Unexpected token, found '"base.css"'
(32,1): run-time error CSS1019: Unexpected token, found '@import'
(32,9): run-time error CSS1019: Unexpected token, found '"theme.css"'

I modified BundleConfig.cs by including manually all the css files that all.css was importing:

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/themes/base/bootstrap.css",
              "~/Content/themes/base/core.css",
              "~/Content/themes/base/base.css",
              "~/Content/themes/base/datepicker.css",
              "~/Content/themes/base/theme.css",
              "~/Content/site.css"));
Comments