JavaScript를 이용해 CSS를 편하게 작성할 수 있게 도와주는 플러그인을 사용할 수 있게 하는 플러그인이다.
혼자서는 아무것도 못 하고 자바스크립트와 함께 사용할 수 있다.
우리가 creat-react-app 하면 함께 설치된다.
2. 어떤 기능들이 있나요?
약 270개가 넘는 플러그인들이 있다. 그중 간단한 것을 살펴보면
autoprefixer : -webkit과 같은 prefix를 생략해준다.
postcss-for : for 문을 css에서 쓸 수 있게 된다.
postcss-color-function : 색의 밝기를 조절 할 수 있다.
postcss-nesting : 들여쓰기 가능!
3. 어떻게 사용하나요?
만약 인스톨 되지 않았다면?
npm install postcss poscss-loader --save-dev
인스톨 후 루트 root에 'postcss.config.js' 파일을 만든다.
module.exports = (ctx) => ({
parser: 'postcss-scss', // 만약, scss등의 파싱이 필요한 경우 설정한다.
plugins: [
require('postcss-import')({
path: ['app/assets/']
}),
// 다음 필요한 플러그인들을 적는다.
]
})
// 플러그인들은 실행순서가 중요하다. 위에서 부터 아래로 실행하기 때문이다.
// 그래서 충돌 없이 실행시키기 위해서는 PostCSS의 깃헙 레포로 가서
// Readme를 참고하여 순서를 지켜줘야 한다.