Externe Stylesheets in Nuxt 3 laden: Wie geht das?

Question

Ich versuche, ein Mapboxgl-Stylesheet in eine Nuxt 3.0.0-rc.8-Anwendung zu laden. Normalerweise füge ich es bei Vue-Projekten manuell im Kopf der Seite index.html hinzu.

Allerdings ist dies in Nuxt 3 offensichtlich nicht der richtige Weg. Ich habe versucht, es den Head- und CSS-Optionen in der Datei nuxt.config.ts hinzuzufügen, ohne Erfolg. Mir ist aufgefallen, dass es beim Hinzufügen zum CSS-Array zu meinem Header hinzugefügt wurde, aber „https://“ durch „_nuxt“ ersetzt wurde.

Ich weiß, dass mir etwas Einfaches fehlt. Das ist meine Konfigurationsdatei:

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' }] },
});

Answer 1

使用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' }]
    }
  }
})