"Missing Mapbox GL JS CSS" when using with Vue-Cli 3

[brianbancroft]

Hi there, and thanks for putting something nice like this together.

I've got an issue where the css isn't loading properly, and I receive the following error:

The main difference between how I was able to use this library and the docs is that I use the map in a nested component instead of declaring it in the main object in main.js. Instead, from within a MainBody component, I have the Mapbox component defined from within the export default statement. To be clear, the intent is to have the map cover the entire region that is coloured #aaa, but not the part that is white. (Resolved, but the message persists)

From MainBody.vue:

<script>
  import Mapbox from 'mapbox-gl-vue'

  export default {
    components: {
      Mapbox
    }
  }
</script>

Is there something else that I require to do to make the warning message go away, and to allow the map to take the entire right-hand of the screen (as in the screencap)?

[brianbancroft]

Okay an update: With regards to the map being stuck on the right-hand side. I should have read #11 which contains a solution, but the message still persists

[phegman]

Hey Brian,

This package does not include the CSS for Mapbox GL JS. I added <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' /> to the head of your index.html and everything seems to be working well!

Hope that is helpful!
Pete

[brianbancroft]

Thanks. This does resolve the issue.

At the time when I built the project using the newest vue-cli, I couldn't find index.html. As Evan kindly points out in vuejs/vue-cli#765, it's in the /public directory of any new project built with vue-cli 3.