[React] CSS Module

들어가기 전

• create-react-app으로 프로젝트를 생성한 경우 CSS Module을 사용할 수 있는 기본적인 설정이 되어있음

classnames 설치

yarn add classnames

App.module.css

.background {
    background: grey;
}

App.js

import React from 'react';
import classNames from 'classnames/bind';
import style from './App.module.css';

const cx = classNames.bind(style);

const App = () => {
    return (
        <div className={cx('background')}>
            CSS Module
        </div>
    )
};

export default App;

[이슈] create-react-app으로 프로젝트 생성 후 CSS Module 작동이 올바르지 않을 경우

• CSS Module이 올바르게 작동하지 않는다면 nodejs 버전을 올린 후 재시도
• nodejs v8버전에서 생성 후 시도했을 때 CSS Module은 올바르게 동작하지 않음

[이슈] 일반 프로젝트 생성 후 CSS Module 작동이 되지 않는 경우

• wbepack.config.js 설정 파일에 아래와 같은 설정이 되어있는지 확인

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

module.exports = {
    module: {
        rules: [
            {
                test: cssRegex,
                exclude: cssModuleRegex,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: cssModuleRegex,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        query: {
                            modules: true,
                            localIdentName: '[name]__[local]___[hash:base64:5]'
                        }
                    }
                ]
            }      
        ],
    },
};

참고

• css-loader 설정 확인이 필요할 경우
  • https://medium.freecodecamp.org/how-i-integrated-css-modules-with-scss-into-my-react-application-32f473e1bb51