vue.js - 如何在 Nuxt 3 中加载外部样式表？

Question

我正在尝试在 Nuxt 3.0.0-rc.8 应用程序中加载 mapboxgl 样式表。通常，对于 Vue 项目，我手动将其添加到 index.html 页面的头部。

但是，这显然不是 Nuxt 3 中的做法。我尝试将其添加到 nuxt.config.ts 文件中的 head 和 css 选项中，但都没有成功。我确实注意到，当我将其添加到 css 数组时，它被添加到我的 header 中，但“https://”被替换为“_nuxt”。

我知道我错过了一些简单的事情。这是我的配置文件:

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