我正在嘗試在 Nuxt 3.0.0-rc.8 應(yīng)用程式中載入 mapboxgl 樣式表。通常,對(duì)於 Vue 項(xiàng)目,我手動(dòng)將其新增至 index.html 頁(yè)面的頭部。
但是,這顯然不是 Nuxt 3 中的做法。我嘗試將其添加到 nuxt.config.ts 檔案中的 head 和 css 選項(xiàng)中,但都沒(méi)有成功。我確實(shí)注意到,當(dāng)我將其添加到 css 數(shù)組時(shí),它被添加到我的標(biāo)頭中,但“https://”被替換為“_nuxt”。
我知道我錯(cuò)過(guò)了一些簡(jiǎn)單的事情。這是我的設(shè)定檔:
export default defineNuxtConfig({ css: [ '~/assets/css/main.css', ], build: { postcss: { postcssOptions: require('./postcss.config.js'), }, }, buildModules: ['@pinia/nuxt'], runtimeConfig: { treesAPIKey: '', public: { baseURL: '', mapToken: '', }, }, head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] }, });
使用app.head
而不是head
。
import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ app: { head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] } } })