Memuatkan helaian gaya luaran dalam Nuxt 3: bagaimana untuk melakukannya?

Question

Saya cuba memuatkan helaian gaya mapboxgl dalam aplikasi Nuxt 3.0.0-rc.8. Biasanya, untuk projek Vue, saya menambahkannya secara manual pada kepala halaman index.html.

Walau bagaimanapun, ini jelas bukan cara untuk melakukannya dalam Nuxt 3. Saya cuba menambahkannya pada pilihan kepala dan css dalam fail nuxt.config.ts tanpa berjaya. Saya mendapati bahawa apabila saya menambahkannya pada tatasusunan css, ia telah ditambahkan pada pengepala saya, tetapi "https://" telah digantikan dengan "_nuxt".

Saya tahu saya kehilangan sesuatu yang mudah. Ini ialah fail konfigurasi saya:

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

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