Quantcast
Channel: C1 CMS Foundation - Open Source on .NET
Viewing all articles
Browse latest Browse all 2540

New Post: Error Bundling and Minification of a stylesheet

$
0
0
Hi,
I encountered an error when attempting to include ZURB Foundation's foundation.css stylesheet along with some other stylesheets.

Here is a sample that renders fine on the screen but creates a compile error on minification:
.myclass {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>');
}
This is the error shown when opening the bundle:
/* Minification failed. Returning unminified contents.
(2,76): run-time error CSS1062: Expected semicolon or closing curly-brace, found '='
 */
.myclass {
  background-image: url(/Frontend/Styles/data:image/svg+xml;utf8,<svg xmlns="http:/www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>);
}
I attempted a workaround by using the minified file provided by the vendor and excluding it from the bundling process by using the data-c1-nobundle="nobundle" attribute but the compiled bundles are placed above this stylesheet which affects the CSS cascade and effectively nukes my styles, resulting in this option being no option at all.

Another option is to include the minified file from the vendor and include it in the bundling with my other stylesheets but because that file has to be loaded first, an error is produced and the other stylesheets don't get minified although everything is still included in the bundle which at least ensures only one http request. Better, but still not an ideal situation.

P.S. Compiled bundles are also placed above any stylesheets loaded from a CDN ... again, not ideal for reasons listed earlier.

Thoughts?

Viewing all articles
Browse latest Browse all 2540

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>