upgrading to bootstrap 4 CSS minifier breaks in asp.net mvc

Question

These are the steps i followed to produce this error

Check VS 2017 is up to date

Created a new asp.net web application, selected MVC, and F5 to debug the application without making any changes. I see different CSS files which are not bundled or minified.

Make a change in web.config to minify and bundle by changing debug = false

F5 -> view the site, and I see one CSS file where the contents are minified.

Stop debugging

From VS -> Tools -> NuGet Package Manger -> Manage NuGet Packages for solution.

I see 14 updates and one of them is for bootstrap v4 which we want to use in our project. Update all the packages

After the packages are updated F5 without debugging

View source -> CSs file is bundled into one file -> View the CSS file and you see an error

/* Minification failed. Returning unminified contents.
(6,10): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,74): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,88): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,105): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,122): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,138): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,153): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,168): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,181): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,196): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,216): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,234): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,254): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,272): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,287): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,305): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,322): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,338): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,353): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,371): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,393): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,415): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,437): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,460): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,644): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */

According to this post the issue is fixed in BundlerMinifier but I do not have that package or Nuglify and minification and bundling still seems to happen.

Doing this out of the box without making any changes should be straight forward but it is not.

What am i missing here?

user_7971963 · Answer

This is a built-in C# problem. They use their class to compress css. I found solutions to the problem.You must create your own class

public class MyStyleBundle : Bundle
{
    public MyStyleBundle(string virtualPath) : base(virtualPath, new MyCssMinify())
    {
    }

    public MyStyleBundle(string virtualPath, string cdnPath) : base(virtualPath, cdnPath, new MyCssMinify())
    {
    }
}

public class MyCssMinify : IBundleTransform
{
    internal static readonly MyCssMinify Instance = new MyCssMinify();

    internal static string CssContentType = "text/css";


    public virtual void Process(BundleContext context, BundleResponse response)
    {
        if (context == null)
        {
            throw new ArgumentNullException("context");
        }
        if (response == null)
        {
            throw new ArgumentNullException("response");
        }
        if (!context.EnableInstrumentation)
        {
            // CssCompress.Go- This is your CSS compression implementation
            // You can use the library " Uglify"
            response.Content = CssCompress.Go(response.Content);
        }
        response.ContentType = CssContentType;
    }
}

Now you can add a new Bundle

    bundles.Add(new MyStyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));

user_14699743 · Answer

If you are not using any special Bootstrap 4 coding, go to nugget an select a pre version 4 version of bootstrap.

upgrading to bootstrap 4 CSS minifier breaks in asp.net mvc

2 Answers