My web application cannot load css and font when deploy host #71

0

vincenzo dʹalconzo created 9 years ago

Hi,

i've work very hard yesterday for this issue... i have a workaround:

go to 'BundleConfig.cs' and change

'new StyleBundle("~/Bundles/App/vendor/css")' in -> 'new StyleBundle("~/Content/AllMyCss.css")'

go to 'layout.cshtml' and change:

<a href="mailto:'@Styles.Render">'@Styles.Render</a>("~/Bundles/App/vendor/css")' in -> <a href="mailto:'@Styles.Render">'@Styles.Render</a>("~/Content/AllMyCss.css")'

i've found that solution in 'http://stackoverflow.com/questions/12240097/mvc4-bundling-does-not-work-when-optimizations-are-set-to-true'.

I've tested locally missing css issue adding this code:

BundleTable.EnableOptimizations = true;

in method: global.asax.cs -> protected override void Application_Start(object sender, EventArgs e){...}

this force optimization even in local machine, remember to comment this line when you have fixed the issue!!;)

Thi workaround resolve functionality (missing images and css) but i see some error in firebug, but the site now work fine.

Anyone have the correct solution ? Why virtual directory '~/Bundles/App/vendor/css' is not reachable ?

Vinc

0

gvb created 9 years ago

hey,

I solved this problem with those things :

In BundleConfig.cs Change the code for the Bundle/App/vendor/css by this code, i kept the old code in comment to show what happenned:

//~/Bundles/App/vendor/css
            bundles.Add(
                new StyleBundle("~/Bundles/App/vendor/css")
                    .Include(
                        //"~/Content/themes/base/all.css",
                        "~/Content/bootstrap-cosmo.min.css",
                        "~/Content/toastr.min.css",
                        "~/Scripts/sweetalert/sweet-alert.css"//,
                        //"~/Content/flags/famfamfam-flags.css",
                        //"~/Content/css/font-awesome.min.css"
                    )
                );

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

            bundles.Add(
                new StyleBundle("~/Content/flags/css")
                .Include(
                    "~/Content/flags/famfamfam-flags.css"
                )
            );

            bundles.Add(
                new StyleBundle("~/fonts/css")
                .Include("~/Content/css/font-awesome.min.css"));

The problem is there is relative reference in those scripts, so we need to keep the same architecture so they can keep their relative path correct. Dont forget to add those new bundle in yours layout.

This will correct so errors but we need to change other things too!

In the WebConfig we need to add a section to tell IIS that we know those MIME type (Font-Awesome) and what they really are...

<system.webServer>
   ....

    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>

...
  </system.webServer>

And one last thing i've done is adding this line in my layout head:

&lt;base href=&quot;@Url.Content(&quot;~/&quot;)&quot; /&gt;

I think it's all you need to remove those errors!

Just show an other screenshot if something is not working properly i might forgot 1 step :)

0

hikalkan created 9 years ago

Support Team

This is completely related to bundling feature of ASP.NET Web Optimization Framework and not related to ASP.NET Boilerplate project. But, I will try to help you as I can.

You should use CssRewriteUrlTransform. Otherwise, image and font file references in CSS corrupts when bundled. Example:

bundles.Add(
                new StyleBundle("~/Bundles/Frontend/libs/css")
                    .Include(StylePaths.Simple_Line_Icons, new CssRewriteUrlTransform())
                    .Include(StylePaths.FontAwesome, new CssRewriteUrlTransform())
                    .Include(StylePaths.FamFamFamFlags, new CssRewriteUrlTransform())
                    .Include(StylePaths.Bootstrap, new CssRewriteUrlTransform())
                    .Include(StylePaths.SweetAlert)
                    .Include(StylePaths.Toastr)
                );

So, in the Include method, use CssRewriteUrlTransform as second argument. Then it will resolve correct relative folder.

When you do that almost all problems are resolved. But sometimes it can not resolve some files. I could find a solution for that. One soluton is yours, changing bundle path so it will be same path with all files in the bundle. This works good but I don't like to put all css files into same folder. If you find a better solution, please share with us.

Have a nice day.

0

julianrobertshawe created 8 years ago

hi

Not sure if I applied the fix correct as I am still getting the error . thanks

I added this to MpaBundleConfig private static void AddMpaCssLibs(BundleCollection bundles, bool isRTL) { bundles.Add( new StyleBundle("~/Bundles/Frontend/libs/css") .Include(StylePaths.Simple_Line_Icons, new CssRewriteUrlTransform()) .Include(StylePaths.FontAwesome, new CssRewriteUrlTransform()) .Include(StylePaths.FamFamFamFlags, new CssRewriteUrlTransform()) .Include(StylePaths.Bootstrap, new CssRewriteUrlTransform()) .Include(StylePaths.SweetAlert) .Include(StylePaths.Toastr) );

        bundles.Add(
            new StyleBundle("~/Bundles/Mpa/libs/css" + (isRTL ? "RTL" : ""))
                .Include(StylePaths.JQuery_UI, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.JQuery_jTable_Theme, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.FontAwesome, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.Simple_Line_Icons, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.FamFamFamFlags, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(isRTL ? StylePaths.BootstrapRTL : StylePaths.Bootstrap, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.JQuery_Uniform, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.JsTree, new CssRewriteUrlWithVirtualDirectoryTransform())
                .Include(StylePaths.Morris)
                .Include(StylePaths.SweetAlert)
                .Include(StylePaths.Toastr)
                .Include(StylePaths.Bootstrap_DateRangePicker)
                .Include(StylePaths.Bootstrap_Switch)
                .Include(StylePaths.Bootstrap_Select)
                .Include(StylePaths.JQuery_Jcrop)
                .ForceOrdered()
            );
    }

still getting same error "NetworkError: 400 Bad Request - <a class="postlink" href="http://ausxpress.missingpiece.com.au/libs/jquery-jtable/themes/metro/blue/http:/themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff">http://ausxpress.missingpiece.com.au/li ... Zu7kw.woff</a>"

0

hikalkan created 8 years ago

Support Team

See this: <a class="postlink" href="http://stackoverflow.com/questions/9021946/add-mime-mapping-in-web-config-for-iis-express">http://stackoverflow.com/questions/9021 ... is-express</a>

0

julianrobertshawe created 8 years ago

Thanks for your reply. I only get the error from the server's IIS instance. The config setting to change the mine type was already present.

thanks

0

scottiemc7 created 8 years ago

I was having the same issue. Implementing the workaround listed here fixed it for me: <a class="postlink" href="http://aspnetoptimization.codeplex.com/workitem/83">http://aspnetoptimization.codeplex.com/workitem/83</a>

Use this class instead of the stock CssRewriteUrlTransform class

public class CssRewriteUrlTransformWrapper : IItemTransform
{
  public string Process(string includedVirtualPath, string input)
  {           
    return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
  }
}

7 Answer(s)