[트러블슈팅] Vite SCSS 변수 참조 에러

 

개발 서버를 구동 시 SCSS 전역 변수를 참조하지 못하는 현상이 발생했습니다.

vite.config.ts 파일에 css 설정을 넣어줘서 SCSS 변수의 전처리 옵션을 설정합니다.

// vite.config.ts
const scssPath = [
   `@import "src/resources/styles/utils/_mixins.scss";`,
   `@import "src/resources/styles/utils/_variables.scss";`,
];

export default defineConfig({
   plugins: [
      react(),
   ],
   css: {
      preprocessorOptions: {
         scss: {
            additionalData: scssPath.join(' '),
         },
      }
   }
});