PostCSS

PostCSS란?

CRA(create-react-app)에서도 default설정인 postcss에 대해 알아보고자 작성하게 되었다.

Sass가 CSS의 전처리기 인것에 비해 postcss는 JS플러그인을 통해 스타일을 변형하는 후처리기로서 동작한다.

 

copy-webpack-plugin은 특정한 디렉터리나 파일을 복사해 번들링 된 폴더 내에 경로로 삽입하는 플러그인이다.

 

html-webpack-plugin

autoprefixer : -webkit- 등의 prefix 없이 스타일을 지정할 수 있다.

 

a {
    display: flex;
}

스타일 변환 결과

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

POST CSS는 우리의 CSS를 조금더 현대적으로 바꿔주는 플러그인이다.

좀더 풀어 설명하자면 POST CSS 는 JS 플러그인을 사용하여 CSS를 변환시키는 툴

이런 플러그인을 사용하여 lint , 변수 , mixin 을 사용하거나 추후의 css 문법을 사용할수 있다.

​

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

1. CSS에 문제가없는지 미리 확인해서 에러로그를 준다.

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

 

TIP

 

• Sass와 같은 전처리기와 postcss는 엄연히 다르다.
• 웹팩 로더(+ etc.)를 통해 쉽게 추가할 수 있다.
• CRA에서도 사용 중이 듯이 이미 많은 곳에서 autoprefixer가 사용되고 있다.
• styleLint,  autoprefixer, cssNext 등 다양한 기능을 제공한다.