时间戳

首页 > 解决方案 > 使用 nuxt js 从插件文件中所需的节点模块导入 css

css - 使用 nuxt js 从插件文件中所需的节点模块导入 css

问题描述

要将全屏按钮添加到我的传单地图到 nuxt 中，我已经安装了 leaflet.fullscreen 包，并且我已经leaflet.js像这样编辑了我的插件：

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

所以我可以在我的主模板中使用它：

    <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>

我的课看起来像这样：

    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();
        }
    }

所以在我的主要组件中，我不知道如何导入与这个全屏插件关联的 css。我试过了 ：

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

这行得通，但显然不是这样做的好方法。知道如何正确吗？

标签： cssvue.jsleafletnuxt.js

解决方案

通过快速的网络研究，我会说您应该能够访问这样的样式：

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

当您在 nuxt.config.js 中注册全局样式时，应用程序将只加载一次。我认为由于node_modules路径的原因，您的构建花费的时间比正常情况要多。

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

你也可以试试nuxt 资源加载器。

推荐阅读