react-esbuild 패키지에서 css 모듈 사용하기

import React from 'react'
import './App.css'
import logo from './logo.svg'
import logo2 from './logo-2.png'
import { REACT_APP_BASE_URL } from 'env'
import * as AppStyle from './App.module.css'
import Button from './Button'

const App = () => {
    console.log(REACT_APP_BASE_URL)
    console.log(AppStyle)

    return (
        <div className='App'>
            <h1 className={AppStyle.button}>Hello, react & esbuild ! </h1>
            <img className={AppStyle.input} src={logo} alt="logo" width={500} height={500}/>
            <img src={logo2} alt="logo-2"/>
            <Button></Button>
        </div>
    )
}
export default App

App.js 파일을 위와 같이 작성한다. 

import * as AppStyle from './App.module.css'

AppStyle 은 App.module.css 파일에 정의된 모든 클래스 속성을 객체형태로 가지고 있다. 

import Button from './Button'

Button 컴포넌트를 사용하기 위하여 임포트한다.

<h1 className={AppStyle.button}>Hello, react & esbuild ! </h1>
<img className={AppStyle.input} src={logo} alt="logo" width={500} height={500}/>

AppStyle 객체의 특정 클래스명으로 스타일을 설정한다. 

.button{
    background-color: skyblue;
}
.input{
    background-color: yellow;
}

App.module.css 파일은 위와 같다. 

import React from 'react'
import { button } from './button.module.css'

const Button = () => <button className={button}>프론트버튼</button>

export default Button

Button.js 파일은 위와 같다. 

import { button } from './Button.module.css'

css 모듈에서 특정 클래스명 하나만 조회할때는 위와 같이 하면 된다.

.button{
    background-color: brown;
}

Button.module.css 파일은 위와 같다. 

body{margin:0;padding:0;box-sizing:border-box}.App{text-align:center}.o{background-color:#87ceeb}.r{background-color:#ff0}.b{background-color:brown}

build 폴더의 bundle.css 파일을 열어보면 위와 같다. App.module.css 파일과 Button.module.css 파일에 동일한 button 이라는 클래스명이 존재하더라도 빌드후에는 esbuild 가 자동으로 클래스명이 충돌하지 않도록 변경해준다.