ASP.NET Core 2 with Bootstrap 4 Bundler Minifier Issue: Expected semicolon or closing curly-brace found '-'

access_time 3 years ago visibility2134 comment 3

Background

When upgrading Bootstrap to v4.0.0 release, the bundler and minifier doesn’t work properly due to CSS variable is commonly used:

:root{--blue:#007bff;

About 26 errors will show up in the Error List with the following message:

Expected semicolon or closing curly-brace found '-'

image

The environment in my machine has the following setup:

  • VS2017 15.5.4
  • <PackageReference Include="BuildBundlerMinifier" Version="2.6.362" />

Downgrading the package to 2.5.357 doesn't fix the problem in my environment though some people mentioned it can work.

Issue Cause

This issue in BuildBundlerMinifier is caused by another issue in package NUglify:

https://github.com/xoofx/NUglify/issues/17

This issue has not been fixed yet.

It is also raised in GitHub:

https://github.com/madskristensen/BundlerMinifier/issues/295

https://github.com/madskristensen/BundlerMinifier/issues/306

Resolution or Workarounds

Temporary fix

Before this issue is fixed, you can use any of the following approaches to get it work:

  • downgrade your Bootstrap 4 version to beta versions
  • or you change your code temporarily not to minimize bootstrap CSS4 file. You can still bundle and minify your other CSS files which are not using CSS variables.
  • or temporarily manually modify your Bootstrap 4 CSS file to remove that :root section if you are not using bower or other package managers to install those client packages.


I will keep this post updated when the issue is fixed permanently.

info Last modified by Raymond at 12 months ago copyright This page is subject to Site terms.
Like this article?
Share on

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts

Want to publish your article on Kontext?

Learn more

Kontext Column

Created for everyone to publish data, programming and cloud related articles.
Follow three steps to create your columns.


Learn more arrow_forward

More from Kontext

Bootstrap 4 Mega Full Width Dropdown Menu

local_offer HTML local_offer Javascript local_offer bootstrap

visibility 1081
thumb_up 1
access_time 5 months ago

On Kontext, a full width mega dropdown menu is implemented using Bootstrap 4. If you'd like to implement similar menus, please follow these steps.  The following code snippets work with Bootstrap 4.4.1. It should also work with other 4.x versions but I didn't test it.  The new CSS class ...

local_offer angular local_offer asp.net core 2 local_offer dotnetcore

visibility 9005
thumb_up 0
access_time 4 years ago

After installed Visual Studio 2017 15.3 preview and .net core 2.0 preview SDK, I upgraded one of my existing asp.net core project to 2.0. The project was created using ‘dotnet new angular’ SPA template.  I also upgraded all the client app packages to the latest. For example, Angular is ...

local_offer dotnetcore

visibility 775
thumb_up 0
access_time 4 years ago

Great introduction about JavaScriptServices ( JavaScriptServices GitHub repository ): Microsoft.AspNetCore.SpaTemplates plugs into dotnet new , providing project templates for Angular 2, Aurelia, Knockout, React, and React+Redux applications. dotnet new -l ...

About column

Articles about ASP.NET Core 1.x, 2.x and 3.x.

rss_feed Subscribe RSS