개요

Nuxt.js에서는 css를 scoped를 통해서 지역 적용할 수 있었는데 React.js에서는 css in js를 사용하거나 module로 적용해야해서 불편했다. 그러던 도중에 react-scoped-css를 알게 되었고 내가 원하던 기능을 제공해서 설치방법을 간단하게 정리해본다.

설치

craco 링크

react-scoped-css 링크

Craco는 Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지이다.

Webpack의 번거로운 설정을 줄이기 위해 다양한 오버라이딩 패키지들이 등장했으며, 대표적으로 Craco, react-app-rewired 등이 있다.

npm i @craco/craco
npm i craco-plugin-scoped-css

그리고 craco.config.js를 만들고 package.json를 수정해주면 된다.
root폴더에 만들어주면 된다.

craco.config.js

module.exports = {
  plugins: [
    {
      plugin: require("craco-plugin-scoped-css"),
    },
  ],
};

package.json 수정

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

사용

// Title.js

import React from 'react'
import './Title.scoped.css'

const Title = props => {
  return (
    <h1 className="title">
      <p>{props.children}</p>
    </h1>
  )
}

export default Title

/* Title.scoped.css */
.title {
  background: #999;
}

p {
  color: #ddd;
}