React, vite에서 CSS Module이 <style>로 보일 때 해결 방법 (css.devSourcemap 설정)

Vite에서 CSS Module이

DevTools에 <style>로만 보일 때 해결하기

 

React + Vite 환경에서 CSS Module을 사용하다 보면
브라우저 DevTools에서 스타일 출처가 파일이름.css처럼 바로 보이지 않고,
<style>로만 표시되는 경우가 있다.

 

이럴 때 CSS 파일 위치를 바로 찾기 불편한데,
이유는 Vite가 개발 환경에서 CSS sourcemap을 기본 활성화하지 않기 때문이다.

 

https://vite.dev/config/shared-options#css-devsourcemap

 

공식 문서에서 css.devSourcemap은 개발 중 CSS sourcemap을 활성화하는 옵션이며,

기본값은 false라고 안내하고 있다.

 

 

왜 이 설정이 필요한가?

CSS sourcemap이 꺼져 있으면

DevTools에서 스타일의 실제 원본 파일 연결이 약해져서 <style> 태그 기준으로만 보일 수 있다.

반대로 css.devSourcemap: true를 켜면 개발 중 CSS 원본 파일과의 연결이 좋아져
파일이름.css 같은 실제 파일 기준으로 추적하기가 쉬워진다.

이 옵션은 Vite 공식 설정 문서의 Shared Options에 포함되어 있다.

 

[ css.devSourcemap: false ]

 

[ css.devSourcemap: true ]

 

 

[ 적용 방법 ]

1. 기존 vite.config.ts가 아래와 같다면,

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

 

2. css.devSourcemap: true를 추가해준다.

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

export default defineConfig({
  plugins: [react()],
  css: {
    devSourcemap: true,
  },
})

 

참고할 점!!

공식 문서 기준으로 css.devSourcemap은 experimental 옵션으로 표시되어 있다.
즉, 사용할 수는 있지만 아직 실험적 기능으로 안내되고 있다.

 

또한 이 설정은 개발 중 CSS sourcemap 활성화 여부에 대한 옵션이다.
프로덕션 빌드 sourcemap과는 별개이며, 빌드 sourcemap은 build.sourcemap 옵션으로 다룬다.

Vite 문서에서 build.sourcemap의 기본값도 false로 안내한다.

 

최종적으로!!

Vite에서는 개발 중 CSS sourcemap이 기본적으로 꺼져 있다.
그래서 DevTools에서 CSS Module의 원본 파일이 바로 안 보이고 <style>로만 보일 수 있다.

이럴 때 vite.config.ts에 아래 설정을 추가하면 된다.

css: {
  devSourcemap: true,
}

 

 

2026.03.06 - 수업내용