Search code examples
c#sassbootstrap-4bundletransformer

BundleTransformer: Bootstrap SASS


I am using the excellent BundleTransformer Nuget package to dynamically compile SCSS using the ASP.NET bundling and minification pipeline. I am attempting to bring in the bootstrap.sass package into the mix, and keep receiving the error below. My setup is pretty simple at this point, and the scss file compiles just fine with the node-sass tool, and if I remove the @import "bootstrap/bootstrap.scss" line, the SCSS compiles perfectly with BundleTransformer. Has anyone run into this issue and possibly have a solution? This is .NET Framework 4.7.2. Thank you!

BundleConfig.cs

        var nullBuilder = new NullBuilder();
        var styleTransformer = new StyleTransformer();
        var scriptTransformer = new ScriptTransformer();
        var nullOrderer = new NullOrderer();

        var defaultScssBundle = new CustomStyleBundle("~/bundles/styles/default");
        defaultScssBundle.Include(
            "~/Content/Default.scss"
        );
        defaultScssBundle.Builder = nullBuilder;
        defaultScssBundle.Transforms.Add(styleTransformer);
        defaultScssBundle.Transforms.Add(new CssMinify());
        defaultScssBundle.Orderer = nullOrderer;
        bundles.Add(defaultScssBundle);

Default.scss

@import "bootstrap/bootstrap.scss";

/* common styles */
.green {
    color: green;
}

.full-width {
    width: 100%;
}

Error

During translation of SCSS code, readed from the file '/TestProject/Content/bootstrap/_alert.scss', to CSS code syntax error has occurred.
See more details:

Error: Undefined variable: "$alert-padding-y".
       on line 7:12 of Content/bootstrap/_alert.scss
>>   padding: $alert-padding-y $alert-padding-x;
  -----------^

Error code: 1
Description: Undefined variable: "$alert-padding-y".
File: /TestProject/Content/bootstrap/_alert.scss
Line number: 7
Column number: 12
Source fragment:

Line 6:   position: relative;
Line 7:   padding: $alert-padding-y $alert-padding-x;
-------------------^
Line 8:   margin-bottom: $alert-margin-bottom;

Solution

  • After much trial and error, I found the problem. After looking at the sample in the Github Repo, I pulled the following lines out of BundleConfig.cs and all is working now.

    defaultScssBundle.Builder = nullBuilder;
    defaultScssBundle.Transforms.Add(styleTransformer);
    defaultScssBundle.Transforms.Add(new CssMinify());