leaflet CSS import issue using VueJs2 and webpack

Question

I'm trying to make a single file component using vuejs2 to display a Leaflet map.

Although my map component is mounted correctly I'm struggling with leaflet css import. The tiles of the map appear all messy and I'm guessing that no style is applied on map block: Unordered tiles . Neither webpack nor the browser console are displaying error.

Any clue to load style sheets the proper way?

sources are available at github repo

Answer 1

There are at least two issues:

1. In webpack.config.js, you have options: {modules: true} enabled for CSS files. This causes webpack to pre-process your leaflet.css file and mangle all selector names. Change modules option to false

2. Your map container needs to have an explicit size. For instance in the <style> section of your map-component.vue , add this:

   .map-container { width: 800px; height: 600px; }