Nuxt 3 및 Vite를 사용하여 전역 CSS를 효율적으로 추가
P粉256487077
P粉256487077 2023-08-25 18:19:44
0
1
505
<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>
P粉256487077
P粉256487077

모든 응답(1)
P粉358281574

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

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

에서 global.scss를 사용하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿