2022.01.20(Tue.) <Post CSS>

1. PostCSS?

• JavaScript를 이용해 CSS를 편하게 작성할 수 있게 도와주는 플러그인을 사용할 수 있게 하는 플러그인이다.
• 혼자서는 아무것도 못 하고 자바스크립트와 함께 사용할 수 있다.
• 우리가 creat-react-app 하면 함께 설치된다.

2. 어떤 기능들이 있나요?

• 약 270개가 넘는 플러그인들이 있다. 그중 간단한 것을 살펴보면
  1. autoprefixer : -webkit과 같은 prefix를 생략해준다.
  2. postcss-for : for 문을 css에서 쓸 수 있게 된다.
  3. postcss-color-function : 색의 밝기를 조절 할 수 있다.
  4. postcss-nesting : 들여쓰기 가능!

3. 어떻게 사용하나요?

1. 만약 인스톨 되지 않았다면?
2. npm install postcss poscss-loader --save-dev
3. 인스톨 후 루트 root에 'postcss.config.js' 파일을 만든다.

module.exports = (ctx) => ({
 parser: 'postcss-scss', // 만약, scss등의 파싱이 필요한 경우 설정한다.
 plugins: [
  require('postcss-import')({
    path: ['app/assets/']
  }),
// 다음 필요한 플러그인들을 적는다.
 ]
})

// 플러그인들은 실행순서가 중요하다. 위에서 부터 아래로 실행하기 때문이다.
// 그래서 충돌 없이 실행시키기 위해서는 PostCSS의 깃헙 레포로 가서
// Readme를 참고하여 순서를 지켜줘야 한다.