vulcanize --inline-css breaks tiles

[balloob]

Vulcanize is the Polymer build tool that can inline HTML and CSS imports. When an app is vulcanized with the --inline-css flag enabled, the map tiles will not show up correctly. This is caused due to the leaflet css file not loading correctly.

I am using Polymer 1.1.0 where external CSS files have been deprecated but should still work.

Can be reproduced by installing vulcanize and vulcanizing the demo.

npm install vulcanize
vulcanize --inline-css demo.html > demo.vulcan.html

Work around is to add this line to your root HTML file before vulcanizing, making the CSS available to all.

<link rel="import" type="css" href="../leaflet/dist/leaflet.css" />

[FranzThomsen1089]

Having the same issue. Would be extremely nice to have fixed :-) 👍

[13k]

Adding a regular rel="stylesheet" line to the main.css build block worked for me.

In index.html:

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->

This will inline leaflet.css into main.css in the dist output.

[FranzThomsen1089]

This would be very nice to have fixed :-)