PostCSS

PostCSS는 SASS와 Webpack과 함께 자주 사용된다.

PostCSS는 CSS의 전처리기이다.

 

CSS를 compile해서 객체로 만든다. 이 객체는 js를 활용하여 변화를 일으킬 수 있다. 변화를 일으키고 다시 css 파일로 변환시킨다.

 

https://github.com/postcss/postcss

GitHub - postcss/postcss: Transforming styles with JS plugins

 

설치

npm install postcss-loader --save-dev

 

PostCSS의 주요 역할은 vendor prefix의 추가이다.

vendor prefix란 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사사리을 알력주기 위해 사용하는 접두사(prefix)를 의미한다.

vendor prefix의 문제점은 어떤 속성을 어떻게 처리해야하는지를 모른다는 것이다. 이를 위해서 plugin을 설치한다.

https://www.postcss.parts/ 

postcss.parts

npm install autoprefixer --save-dev

autoprefixer는 css를 확인해서, 필요시 vendor prefix를 더해준다. 

 

postcss.config.js

module.exports = {
  plugins: {
    // default 사용
    autoprefixer: {},
  },
};

 

 

그러고 나서, 적용할 브라우저를 작성한다.

package.json

{
  ....,
  // 최소 1프로 이상의 사용률과 각가에 대한 2개의 최신 버전에 대해서만 적용해달라는 의미이다.
  "broswerslist": [
    "> 1%",
    "last 2 versions"
  ]
}