vite환경 개발자도구에서 styled-components class명 구분하기

styled-components를 사용하다보면 너무 많은 컴포넌트가 생성하면서 아래와같이 classname으로 구분이 힘들어질 때가 생깁니다. 이때마다 안의 CSS 내용을 보고 파일을 찾아갔었는데

그래서 좋은 방법이 없을까 하고 찾아보다가 이에 해당하는 bable plugin이 존재한다는 것을 찾게 되었고 적용하는 방법을 기록해볼까 합니다.

 

Create-react-app 환경

create-react-app에는 다음과 같이 import하면 끝

import styled from 'styled-components/macro';

 

 

이번에 vite를 사용하며 초기세팅해본 결과 cra와는 다르게 vite.config에도 동시에 설정해야되는 것이 많음 (ex: tsconfig baseUrl )

 

설정과정

1. vite-plugin-babel-macros설치

yarn add vite-plugin-babel-macros --dev

"devDependencies": {
 …
"vite-plugin-babel-macros": "^1.0.6"
}

 

 2. vite.config.ts설정

import path from 'path';

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
...
import macrosPlugin from 'vite-plugin-babel-macros';
// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react(), macrosPlugin()],

});

 

3. styled-components/macro 사용

import styled from 'styled-components/macro';

 

결과

 개발자도구에서 className을 보면 파일명__컴포넌트명-해쉬값 이렇게 뜨는걸 볼 수 있음

 

 

번외

vsconfig 파일에서 파일명, component명 표시여부를 설정할 수 있음.

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false
            }
          ]
        ]
      }
    })
  ]
})

 

 

Reference

• https://github.com/styled-components/babel-plugin-styled-components/issues/350  
• https://itchallenger.tistory.com/594