PostCSS 활용

Post CSS 확장

CRA는 CSS 최적화, Autoprefixer(브라우저 벤더 접두사 자동 추가)등 제공되는 PostCSS 기본 기능을 활용하거나, 새로운 기능을 추가해 사용 할 수 있습니다. 예를 들어 all, break 속성, CSS 변수, 미디어쿼리 범위 등 새로운 CSS 기능을 구형 브라우저에서 지원되도록 자동 폴리필(polyfill) 합니다.

CRA 구성의 browserslist 설정 기준을 토대로 대상 지원 브라우저에 맞게 코드가 자동 처리됩니다.

package.json

"browserslist": {
  "production": [
    "> 1% in KR",
    "not dead",
    "not ie <= 10"
  ],
  "development": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 1 safari version"
  ]
}

예를 들어 다음과 같이 작성한 스타일 코드가

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

PostCSS에 의해 다음과 같은 코드가 출력됩니다.

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

Autoprefixer에 의한 자동 접두사 설정을 일시적으로 비활성해야 한다면 비활성 방법을 사용합니다.

.App {
  /* autoprefixer: off */
  display: flex;
  flex-direction: row;
  align-items: center;
}

CSS Grid 설정

CSS Grid 레이아웃의 경우 자동 접두사 기능이 기본적으로 비활성 상태입니다. CSS Grid 접두사를 활성화 하려면 CSS 파일 상단에 다음 주석 코드를 추가합니다.

styles/index.css

/* CSS Grid 모듈 사용 설정 */
/* autoprefixer grid: autoplace */

CSS Grid 레이아웃에 대한 자세한 정보는 러닝 가이드 북을 참고하세요.

레이아웃 디자인CSS Grid Layout Guidebook