Issue with minified CSS from Web Essentials

0
votes

Using Web Essentials 2013 for Update 3 in Visual Studio Express 2013 for Web, and am having a problem with the resultant minified CSS file. The website I'm working on uses a Twitter Boostrap platform, and has 2 separate CSS files - bootstrap.css and grayscale.css for the theme.

I'm using Web Essentials to create a CSS bundle file, and then insert the resultant minified CSS file into the site header. I'm picking bootstrap.css first and grayscale.css second, and the resultant bundle XML file verifies this order. It seems that many of the grayscale.css styles are not getting read by the browser when I reference only the minified CSS file. If I instead reference the bundled CSS file (generated by Web Essentials) that works correctly.

Are there any suggestions to help troubleshoot this issue? It seems like something (syntax) in the min CSS file is triggering the issue, but as this file gets automatically generated by Web Essentials I'm not sure where to look.

1
csstwitter-bootstrapweb-essentials
Perhaps rather than syntax issue it's a matter of specificity. That being said, don't get why the bundled css file works fine but the minified doesn't. - khilley

1 Answers

1
votes

FINALLY figured this out. Seems to be a bug with either how Web Essentials minifies the CSS files or the syntax from the theme CSS. To resolve it, needed to manually alter a numeric value in the CSS so that the minified version wouldn't choke. Will post a bug issue on it to the Bootstrap theme on GitHub.