Vue 3 + Vite 환경에서 SCSS 전역적으로 사용하는 방법

Vue3 + Vite 환경에서 SCSS를 전역적으로 불러와 사용하기 위해서는 아래와 같이 설정하시면 됩니다.

1. vite.config.js을 열어줍니다.

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2. 아래와 같이 css 항목 및 scss 추가 파일을 지정해 줍니다.

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

  // SCSS 전역 사용
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/scss/_variables";',
        additionalData: '@import "./src/assets/scss/_mixins";',
      }
    }
  }
})

3. additionalData 항목은 아래와 같이 동시에 복수 지정도 가능합니다.

// SCSS 전역 사용
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
                @import "./src/assets/scss/_variables";
           @import "./src/assets/scss/_mixins";
            `
    }
  }
}