Javascript and CSS bundling and minification

I see there are a few posts about issues with javascript and css bundling and minification in nopCommerce 4.1

I am experiencing the same issues.

When I turn this feature off, everything works fine.

When I enable it, the CSS stylesheets are not getting bundled or minified.

I have searched the CSS for errors, but nothing is popping up.

I have even tried turning on the bundle and minification option and then taking what does bundled and adding one line to it, and even that does not get bundled.. so I'm unsure if there are even any errors in the CSS.

This feature seems to be broken, at least for me. :(

Hi,
It’s working fine if your css is proper.
Just validate your css and make it error free.

Also check position of your css, if it still not work then change positions of css file and check. It should be work.

Ummm I just overwrote the "Custom Head Styles" text box with only this:

body {
  color: #000;
  font-size: 16px;
  background: #FBFAF5;
}

And it is not working. Are you saying that little bit of CSS contains errors?

HI, check all errors of css.

I reported same issue at release of nopCommerce 4.10 but there was issue in css.

Please check this issue.

Well, the "Custom Head Styles" textbox is the only CSS we have modified for over a year.. Everything else has stayed the same.. so if there is an "error" in another file, it has been there... so how did it work before this version?

I have been trying to run the content through a linter, like http://csslint.net but I see are warning, no errors in any of the files :(

I've tried applying the bundling option for JS and CSS in the Admin.  i also set debug=false in the web.config, but i'm not even sure if it's working.  What is supposed to happen when the setting is working correctly?  What should i see on the source of the pages?

clsanford wrote:

When you apply js/css minification, all js/css files will be complied into one js/css file.

clsanford wrote:

Hi,

In the nopCommerce you can find three types of minification. CSS minification, JS minification and since the 4.20 version also HTML minification. To minify JS, CSS and HTML files, comments and extra spaces need to be removed, as well as crunch variable names so as to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.

1. CSS and JS minification
Before minification each file will be visible and used. So if you have 15 different JS and CSS files, nopCommerce will load each file independently. Before minification you will see something similar to:


After minification each file will be combined, has removed extra spaces, comments. So the final result will be equal to:


2. HTML minification

HTML Minification will have impact on the whole site, so if you minify the HTML you will see it without problems, minified HTML looks like this:


Hope that helped.

Best regards,
Patryk