[Vue3] vite.config.ts 에서 scss 설정하는 방법

이슈

vue.config.ts 나  webpack.config.ts 에서 매번 설정하는 scss를 설정하려는데 이번에는 typescript가 같이 들어가 있는 프로젝트라 vite.config.ts에 설정해줘야했다.

 

해결

기존 vue.config.ts 에 하는 방법과 거의 같았다.
app.scss를 연결시켜주었더니 모든 파일에서 app.scss에서 선언한 변수, rem설정 등을 동일하게 사용할 수 있었다.

 

//vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "/src/styles/mobile/app.scss";'
      }
    }
  },
});

 

vite.config 공식문서:  https://vitejs.dev/config/

Configuring Vite | Vite