[TIL # 45] Vue Vite 환경에서 SCSS 파일 전역으로 사용하기

Yejin Yang·2022년 6월 24일

TIL

[TIL]

목록 보기

44/67

Vite - SCSS 파일 전역 사용

vite.config.js 파일

defineConfig 부분에 css 코드를 아래 처럼 추가해준 뒤, import 키워드로 파일을 가져오면 된다.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '~', replacement: `${__dirname}/src` }
    ]
  },
  
  // SCSS 전역 사용
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/scss/_variables";' 
      }
    }
  }
})