Mapbox in global css

[agracia-foticos]

We have implemented mapbox in our page

Mapbox its only in one page, but the css of mapbox its in global css

Maybe the nuxtmapbox css only has been imported in the page mentioned

[AlexLavoie42]

Are you currently using v1.4.5? I have split the bundle in that update which should have fixed this.

I can confirm that in our production the mapbox css is being put in our layout that requires it instead of entry.

[agracia-foticos]

Are you currently using v1.4.5? I have split the bundle in that update which should have fixed this.

I can confirm that in our production the mapbox css is being put in our layout that requires it instead of entry.

I'm using nuxt-mapbox 1.4.5

The javascript its correct splitting, but css isn't splitting

[agracia-foticos]

something new??

[AlexLavoie42]

I have not been able to reproduce this even when building large apps. CSS is always bundled in the layout where mapbox is used instead of the entry css.

This seems like an issue with your implementation, so I will not really be able to help without a more detailed reproduction. Make sure you are only using the module on the pages where mapbox is used. Using the geocoder will also import the css (since we need to initialize mapbox) so perhaps that is the cause?

[AlexLavoie42]

Closing due to inactivity & with no reproduction

[agracia-foticos]

@AlexLavoie42 in our page, we use mapbox in a client component loaded with Lazy.

And the mapbox css isnt loaded in a bundle, its loaded in the entry css (global)

The geocoder its loaded in another diferent component loaded also with Lazy

[AlexLavoie42]

I've created a little demo (Even using Lazy as you mentioned) here. You need to download and run build locally, seems like stackblitz wont save output.

You can see in the build output that we are not getting any entry css output at all, and all the map styles are bundled correctly under initMapbox.css (This is where it gets imported, if you remove the geocoder page it will go directly in Map.css instead.)

The most common causes of bundling issues I have seen are either using a map component in app.vue, in a plugin, or with dynamic components.

If you are able to share some of your source code with me privately (or a copy with sensitive data removed) I would be happy to help investigate!

[agracia-foticos]

@AlexLavoie42 i'm checking our information.

I can see that, with any nuxt upgrade, the mapbox styles are in another css file, not in entry.

It seems that the issue is resolved