vite에서 SCSS 파일 전역으로 설정하기 (vite.config.js 설정)

지난 포스팅에 이어서 vite.config.js 파일 추가 설정하기!

preprocessorOptions추가

additionalData 옵션을 추가할 수 있다.

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
            @use '@css/abstracts';
			@use '@css/layout';
        `,
      },
    },
  },

});

전체 vite.config.js 코드

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

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


export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 절대경로 사용
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@css': fileURLToPath(new URL('./src/assets/css', import.meta.url)),
    },
  },
  // SCSS 전역 사용
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
            @use '@css/abstracts' as *;
        `,
      },
    },
  },
  // 로컬 포트 설정
  server: {
    port: 1234,
  },
});