[英]Importing css from a node module required in a plugin file with nuxt js
要將全屏按鈕添加到我的傳單地圖到 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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©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>
那行得通,但顯然不是這樣做的好方法。 知道如何正確嗎?
通過快速的網絡研究,我會說你應該能夠訪問這樣的樣式:
@import "~leaflet/dist/leaflet.css";
當您在 nuxt.config.js 中注冊全局樣式時,應用程序將只加載一次。 由於node_modules
路徑,我認為您的構建node_modules
花費的時間node_modules
。
// nuxt.config.js
css: ['~/assets/styles/global.css'],
您也可以嘗試使用nuxt 資源加載器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.