문제 상황

pages/index.vue에 존재하는 스타일을 전역으로 적용하기 위해 main.scss로 분리하고 index.vue의 style태그는 비워두려고 했다.

그러나 style태그를 없애자 스타일이 적용이 되지 않는 에러가 났다.

올바른버전

에러상황

원인분석

import vue from '@vitejs/plugin-vue';
import { URL, fileURLToPath } from 'url';
import { defineConfig } from 'vite';

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [vue()],
  base: './',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@components': fileURLToPath(
        new URL('./src/components', import.meta.url)
      ),
      '@pages': fileURLToPath(new URL('./src/pages', import.meta.url)),
      '@routes': fileURLToPath(new URL('./src/routes', import.meta.url)),
      '@constants': fileURLToPath(new URL('./src/constants', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/main.scss";'
      }
    }
  }
});

내 vite.config.ts 코드이다.

ccss.preprocessorOptions.scss.additionalData 부분을 보면 모든 scss 파일의 시작 부분에 main.scss 파일의 내용을 포함시킨다.

따라서 style태그 속 아무 내용도 없거나, 아예 style태그를 없애면 스타일 적용이 안돼 에러가 발생했다.