How do I load an external stylesheet in Nuxt 3?-CodePudding

I am trying to load the mapboxgl stylesheet in my Nuxt 3.0.0-rc.8 app. Typically with a Vue projec I manually add it to the head of the index.html page.

However, that is not how you do in Nuxt 3 apparently. I've tried adding it to the head and css options in the nuxt.config.ts file, but neither got me there. I did notice that when I added it to the css array, it was added to my header but 'https://' was replaced with '_nuxt'.

I know I am missing something simple. Here is my config file:

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

CodePudding user response：

Use app.head instead of 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' }]
    }
  }
})