[PostCSS] SASS보다 간단한 PostCSS

테스트용 기능을 만들때 css 전처리는 생략하는 작업이 되어버리기 때문에, 대체할 수 있는 플러그인을 찾다가 PostCSS를 발견하였다. create-react-dom으로 리액트 개발환경을 구축했을 때 생성되는 플러그인이며 css 파일명에 .module을 붙여주면 이용이 가능하다. 사용법은 아래와 같다.

 

 

1) src 폴더 안에 common 또는 base 폴더를 만들어 공통 요소를 정의한다.

// color.css
@value makerBlack: black;
@value makerWhite: white;
@value makerDarkWhite: #f5f5f3;
@value makerLightGrey: #e8e7e6;
@value makerLightPink: #ffeae8;
@value makerGreen: #385461;
@value makerblue: #1cb6e0;

// size.css
@value mediaQuery: 62rem;

 

 

2) index.module에서 아래와 같이 import하여 사용할 수 있다.

 

@value makerBlack from './common/ui/colors.css';

nav { 
  display: flex;
  flex-direction: row;
  background-color: makerBlack;
}

 

 

3) app.js에서 import할 때도 index.module이라고 파일명을 교체 >  nav 컴포넌트에 makerBlack이 적용된다.