Nuxt 3에서 외부 스타일시트 로딩: 어떻게 하나요?
Nuxt 3.0.0-rc.8 애플리케이션에서 mapboxgl 스타일시트를 로드하려고 합니다. 일반적으로 Vue 프로젝트의 경우 index.html 페이지 헤드에 수동으로 추가합니다.
그러나 Nuxt 3에서는 분명히 이런 방식이 아닙니다. nuxt.config.ts 파일의 헤드 및 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' }] },
});
