Sass SCSS by BundleTranslator

Question

I have set up the BundleTranslator in my MVC 5 project via NuGet (BundleTransformer.SassAndScss v1.9.96 with the Core and LibSassHost components). Next I have added the bundle reference to my View.cshtml

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

and redefined the BundleConfig.cs:

var nullOrderer = new NullOrderer();
var commonStylesBundle = new CustomStyleBundle("~/Content/sass");
commonStylesBundle.Include("~/Content/Custom/the-style.scss");
commonStylesBundle.Orderer = nullOrderer;
bundles.Add(commonStylesBundle);

After build, the website has a .scss reference:

<link href="/Content/Custom/the-style.scss" rel="stylesheet">

and everything is working locally probably only because I have installed SassAndCoffee package with SassyStudio. The problem emerges when I deploy on external IIS server. The file exists in the Content/Custom directory, but the website is broken. The HTML code also has the file reference (it links to .scss file, not compiled .css) but if I try to navigate to it, I get error 500.

I have changed the Sass file Build Action to Content (from None) and left Copy to Output Directory as Do not copy. I have also added httpHandlers to Web.config (but I actually don't know whatfor) but still nothing helps.

<httpHandlers>
  <add path="*.sass" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
  <add path="*.scss" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
</httpHandlers>

I didn't check all of the settings in Web.config because of the NuGet installation which (as I see) provides this kind of data for the BundleTransformer.

How do I configure the BundleTransformer to work correctly on IIS? Do I have to override the BundleResolver as in example code?

BundleResolver.Current = new CustomBundleResolver();

Answer 1

There are a few things to try to diagnose the problem. Firstly it works locally! :)

1.
It is worth testing that your bundling works correctly. You can do this by temporarily setting the following (take this out once you have finished).

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        BundleTable.EnableOptimizations = true;

        // Bundles and stuff...
    }
}

Run the site and then in your browser dev tools you should get something like this:

/bundles/commonStyles?v=BzJZwKfP1XV8a6CotGRsHhbxraPDst9zDL2X4r36Y301

If this works then we can be happy bundling will work in production.

2.
Permissions. If your getting a 500 internal server error, check the permissions on the folder that contains the scss files. Also check they are there :)

3.
Mime type. There may be a slight chance that IIS needs a mime type added for .scss, but I'm not convinced it will.