在 Nuxt 3 中載入外部樣式表:如何做到?
P粉905144514
P粉905144514 2023-12-20 14:54:49
0
1
630

我正在嘗試在 Nuxt 3.0.0-rc.8 應用程式中載入 mapboxgl 樣式表。通常,對於 Vue 項目,我手動將其新增至 index.html 頁面的頭部。

但是,這顯然不是 Nuxt 3 中的做法。我嘗試將其添加到 nuxt.config.ts 檔案中的 head 和 css 選項中,但都沒有成功。我確實注意到,當我將其添加到 css 數組時,它被添加到我的標頭中,但“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' }] },
});

P粉905144514
P粉905144514

全部回覆(1)
P粉986028039

使用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' }]
    }
  }
})
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板