Vue.js/Vite 앱에서 @use 'sass:color'를 사용하면 extraData를 통해 가져온 변수를 사용할 수 없게 됩니다.

Question

저는 Vitest 및 Sass 로더와 함께 Vue.js를 사용하고 있습니다.

인라인 scss 파일이나 구성 요소에서 @use 'sass:color'를 사용하면 vite.config.tscss.preprocessorOptions.scss.additionalData

문제는 여기에서 재현됩니다: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss

나중에 참고하실 수 있도록 설정은 다음과 같습니다.

./src/style/vars.scss

$sample-var: red;

vite.config.js

'vite'에서 { 정의 구성 } 가져오기;
'@vitejs/plugin-vue'에서 vue를 가져옵니다.

// https://vitejs.dev/config/
기본 정의 구성 내보내기({
  플러그인: [vue()],
  CSS: {
    전처리기옵션: {
      scss: {
        추가 데이터: `@use "./src/style/vars.scss"를 *;`로 사용,
      },
    },
  },
});

./src/style/sample.scss

@use 'sass:color';

.샘플 스타일 {
  색상: $sample-var;
}

구성요소:

<스크립트 설정>



<템플릿>
  
안녕하세요 샘플 스타일

Answer 1

컴포넌트의 <style>标签前，additionalData에 정의된 Scss 코드가 추가됩니다. 따라서 Sass 컴파일러의 최종 처리는 다음과 같습니다.

으아악

문서 에 따르면 sample.scss不包含任何@use 문이 다음과 같을 때:

이는 위 코드가 다음과 같이 평가됨을 의미합니다.

으아악

그러나 모듈 시스템 파일 가져오기 에 대한 문서에 따르면(강조):

$sample-var是一个模块的成员，因此sample.scss无法访问$sample-var.