Importing css from a node module required in a plugin file with nuxt js

Question

To add the fullscreen button to my leaflet map into nuxt i have installed leaflet.fullscreen package and i have edited my plugin leaflet.js like so:

    import Vue from "vue";
    import { LMap, LTileLayer, LMarker, LPolyline } from "vue2-leaflet";
    require("leaflet-routing-machine");
    require("lrm-graphhopper");
    require("leaflet.fullscreen");

So i can use it in my main template:

    <template>
     <div>
       <section class="search__page">
         <div id="map-wrap" class="map__wrapper"></div>
       </section>
      </div>
    </template>

    <script>
      import Tmap from "@/utils/TripMap.js";

      export default {
        mounted() {
          this.initTmap();
        },
        data() {
          return {
            mainMap: null,
          },
        methods: {
          initTmap() {
            this.mainMap = new Tmap();
            this.mainMap.load();
          }
        }
      }
    </script>

My class looks like that :

    export default class Tmap {
        constructor() {
            this.map = null;
        }
        load) {
            this.map = L.map("map-wrap", {
            fullscreenControl: true,
            fullscreenControlOptions: {
                position: "topleft"
            }).setView([46.7227062, 2.5046503], 6);
            L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
                maxZoom: 18,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;TRIP'
            }).addTo(this.map);
        }

        addMarkerOnClick() {
            this.map.addEventListener("click", ev => {
                L.marker(ev.latlng).addTo(this.map);
            });
        }
        getBounds() {
            return this.map.getBounds();
        }
    }

So in my main component i don't know how to import the css associated to this fullscreen plugin. I tried :

    <style>
        @import "~/node_modules/leaflet.fullscreen/Control.FullScreen.css";
    </style>

That works but it's obviously not the good way to do that. Any idea how to that properly ?

moritzgvt · Accepted Answer · 2020-01-17 11:38:44Z

5

From a quick web research i would say you should be able to access the styles like this:

@import "~leaflet/dist/leaflet.css";

When you register a global style in your nuxt.config.js the app will load it just once. I assume your build is taking more time than normal due to the node_modules path.

// nuxt.config.js
css: ['~/assets/styles/global.css'],

You could also give the nuxt resource loader a try.

answered Jan 17, 2020 at 11:38

moritzgvt

4645 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yoyojs Over a year ago

so in this case i should copy the css from my node module into my project ?

moritzgvt Over a year ago

No, when you correctly installed the npm package you should be able to import that into your global.css like so: @import '~leaflet-fullscreen/dist/leaflet.fullscreen.css'; Afterwrads teh styles should be available globally in your App.

Collectives™ on Stack Overflow

Importing css from a node module required in a plugin file with nuxt js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related