PostCSS 를 사용해보자

PostCSS 를 사용해보자

·

2 min read

PostCSS ❓

POST CSS 는 JS 플러그인을 사용하여 CSS를 변환시키는 툴 입니다.

➡️ POST CSS 는 언어가 아니라 자동으로 신기술 CSS 를 호환가능하도록 변환시켜주는 플러그인 입니다.

➡️ CSS에 문제가없는지 미리 확인해서 에러로그를 줍니다.

➡️ 지금 발전중인 CSS의 현대기술들을 브라우저에 호환되도록 자동 변환 합니다.

➡️ PostCSS 자체는 아무 일도 하지 않지만, 다양한 플러그인과 플러그인을 추가할 수 있는 환경을 제공 합니다.

create react app 을 하면 기본적으로 PostCSS 가 설치됩니다.

출처 : https://postcss.org/

React 에서 기본적인 css 예시

두 개의 버튼은 동일한 클래스 명을 가지고 있지만, 분명 다른 css 파일을 import 하고 있습니다. 하지만 버튼의 색상은 red 로 통일되어 있습니다.

이유는 ❓

동일한 클래스 명을 사용하게 되면 가장 나중에 import 된 css 파일에 정의된 셀렉터가 적용이 됩니다.

그렇기에 일반적인 css 파일을 만들게 되면 이름 충돌이 나지 않기 위해 주의해야 합니다.

하지만 컴포넌트를 얼마나 많이 만들지 알 수 없는 상황에서 css 방법론 등을 따라서 이름을 짓고 있으면 이것 또한 상당한 리소스가 필요하게 됩니다.

PostCSS 를 사용하는 방법

css 파일 확장자 이전에 module 이라고 붙이게 되면 PostCSS 를 자동으로 사용 할 수 있습니다.

위의 예시에 적용해보면

이전 처럼 그냥 import 하면 안되고 아래와 같이 사용 할 수 있습니다. ➡️ 특히 styles 라고 된 부분은 사용자 임의로 이름을 바꿀 수 있습니다.

carbon (29)

그리고 import 했다면 string 으로 사용하면 안되고 {} 를 사용하여 객체에 접근하듯 하면 됩니다.

carbon (30)

직접 확인해보기

PostCSS 를 사용하게 되면 이전 처럼 외부에 있는 이름 충돌을 걱정하지 않아도 됩니다.

PostCSS 의 특징

CSS 를 모듈 별로 관리 할 수 있습니다.

➡️ 일반 CSS 처럼 사용하는 방법은 동일 합니다.

➡️ CRA 를 사용하게 되면 별도로 설정 할 필요가 없습니다.


참고

https://postcss.org/

https://velog.io/@since-1994/React-postCSS

https://yoonjong-park.tistory.com/entry/CSS-PostCSS-%EC%9E%A5%EC%A0%90