Nuxt 3 및 Vite를 사용하여 전역 CSS를 효율적으로 추가

Question

내 프로젝트에 전역 Sass가 포함되어 있지만 이를 프로젝트에 추가하는 효율적인 방법을 찾을 수 없습니다.

프로젝트에 CSS를 추가하는 데는 두 가지 인기 있는 방법이 있는 것 같습니다.

초대: {
    플러그인: [svgLoader()],
    CSS: {
        전처리기옵션: {
            scss: {
                추가데이터: `
                  @import "~/assets/styles/main.scss";;
          `,

            },
        },
    },

vite를 사용하는 것이 효과가 있는 것 같지만 사용하는 모든 구성 요소에 자체적으로 주입되는 것 같아서 프로젝트를 빌드할 때 CSS가 여러 번 반복되는 것을 볼 수 있으며 일부 파일은 최대 300초 속도까지 표시됩니다. 문제는 vites 측 https://github.com/vitejs/vite/issues/4448

에서 발견되었습니다.

css: ["@/assets/styles/main.scss"],

위 옵션이 모든 구성 요소에 대해 이 작업을 수행하는 것은 아니지만, .vue 파일의 일반 범위 sass는 이 방법으로 컴파일할 때 sass 변수와 믹스인을 선택하지 않습니다

Answer 1

모든 페이지에 추가하려면 additionalData를 사용하세요. 이 프로젝트는 빌드 시 영구 CSS로 변환되지 않는 mixns 및 vars에서만 작동합니다.

기본적으로 additionalData中的mixins中使用vars，然后在css의 믹스인에서 vars를 사용한 다음 css

에서 global.scss를 사용하세요.