"forbidden error" when trying to access the bundled slick.css file in ASP.Net

Question

I am using slick-carousel in my ASP.Net MVC project. If I link the slick.css file through normal <link> tag in Html, it works fine. But if I bundle the slick.css file and render it in Html, it shows forbidden error(403).

Working Solution

<link rel="stylesheet" type="text/css" href="~/Content/Slick/slick.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Slick/slick-theme.css" />

Bundling the files

bundles.Add(new StyleBundle("~/Content/Slick").Include(
                    "~/Content/Slick/slick.css"));

bundles.Add(new StyleBundle("~/Content/SlickTheme").Include(
                    "~/Content/Slick/slick-theme.css"));

Refering the bundled files

@Styles.Render("~/Content/Slick")
@Styles.Render("~/Content/SlickTheme")

Can anyone please let me know why i am getting such error only when bundled?

Answer 1

This is not a slick specific issue, but the folder structure of slick's NuGet installation provokes it.

There is a problem if the bundle name matches a really existing folder in the web application, because then the request is not recognized as an access to the bundle, but to the folder which then isn't granted. So as you can see in my example, the bundle's naming scheme matches the folder.

 bundles.Add(new StyleBundle("~/Content/slick").Include("~/Content/Slick/slick.css"));

After changing the bundle name as shown here (and of course the references), it works

 bundles.Add(new StyleBundle("~/Content/slickstyle").Include("~/Content/Slick/slick.css"));