<p>저는 Vitest 및 Sass 로더와 함께 Vue.js를 사용하고 있습니다. </p> <p>인라인 scss 파일이나 구성 요소에서 <code>@use 'sass:color'</code>를 사용하면 <code>vite.config.ts</ 변수를 덮어쓰는 것 같습니다. <code>css.preprocessorOptions.scss.additionalData</code> </p> <p>문제는 여기에서 재현됩니다: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss</p> <p>나중에 참고하실 수 있도록 설정은 다음과 같습니다.</p> <p><strong>./src/style/vars.scss</strong></p> <pre class="brush:php;toolbar:false;">$sample-var: red;</pre> <p><strong>vite.config.js</strong></p> <pre class="brush:php;toolbar:false;">'vite'에서 { 정의 구성 } 가져오기; '@vitejs/plugin-vue'에서 vue를 가져옵니다. // https://vitejs.dev/config/ 기본 정의 구성 내보내기({ 플러그인: [vue()], CSS: { 전처리기옵션: { scss: { 추가 데이터: `@use "./src/style/vars.scss"를 *;`로 사용, }, }, }, });</pre> <p><strong>./src/style/sample.scss</strong></p> <pre class="brush:php;toolbar:false;">@use 'sass:color'; .샘플 스타일 { 색상: $sample-var; }</pre> <p><strong>구성요소</strong>:</p> <pre class="brush:php;toolbar:false;"><스크립트 설정> </스크립트> <템플릿> <div class="sample-style">안녕하세요 샘플 스타일</div> </템플릿> <style lang="scss" 범위 지정> @import '../style/sample.scss'; <p>이 코드를 사용하면 <code>sample.scss</code>의 <code>$sample-var</code>에 <code>Undefine Variable.</code>가 표시됩니다. </p> <p>그러나 <code>@use 'sass:color';</code>를 주석 처리하면 예상대로 작동합니다(<code>$sample-var</code>에 액세스할 수 있습니다). </p> <p>여기서 무슨 일이 일어나고 있나요? <code>vite.config.js</code>에서 <code>additionalData</code>를 사용하는 동안 구성요소 스타일에서 <code>sass:color</code>를 올바르게 가져오려면 어떻게 해야 하나요? 전 세계적으로? 모범 사례에 대해 배우고 싶습니다. </p>