Nuxt 3 및 Vite를 사용하여 전역 CSS를 효율적으로 추가
<p>내 프로젝트에 전역 Sass가 포함되어 있지만 이를 프로젝트에 추가하는 효율적인 방법을 찾을 수 없습니다. </p>
<p>프로젝트에 CSS를 추가하는 데는 두 가지 인기 있는 방법이 있는 것 같습니다. </p>
<pre class="brush:php;toolbar:false;">초대: {
플러그인: [svgLoader()],
CSS: {
전처리기옵션: {
scss: {
추가데이터: `
@import "~/assets/styles/main.scss";;
`,
},
},
},</pre>
<p>vite를 사용하는 것이 효과가 있는 것 같지만 사용하는 모든 구성 요소에 자체적으로 주입되는 것 같아서 프로젝트를 빌드할 때 CSS가 여러 번 반복되는 것을 볼 수 있으며 일부 파일은 최대 300초 속도까지 표시됩니다. 문제는 vites 측 https://github.com/vitejs/vite/issues/4448</p>에서 발견되었습니다.
<pre class="brush:php;toolbar:false;">css: ["@/assets/styles/main.scss"],</pre>
<p>위 옵션이 모든 구성 요소에 대해 이 작업을 수행하는 것은 아니지만, .vue 파일의 일반 범위 sass는 이 방법으로 컴파일할 때 sass 변수와 믹스인을 선택하지 않습니다</p>
