webpack + PostCSS 설정하기

PostCSS에 대한 소개는 앞선 글에서 진행했으니, 이제 설정 방법을 알아보자.

설치

npm install postcss poscss-loader --save-dev

웹팩 설정

module: {
 rules: [
  {
   test: /\.p?css$/, // 순수한 CSS 파일과 구분하고 싶다면 pcss를 사용해도 좋다. 대개 그냥 .css 확장자를 사용한다.
   use: [
    {loader: "style-loader"},
    {loader: "css-loader", options: {sourceMaps: true}},
    {loader: "postcss-loader"}
   ],
  }
 ]
},

PostCSS 설정

프로젝트 root에 postcss.config.js 파일을 만든다.

module.exports = (ctx) => ({
 parser: 'postcss-scss', // 파서 옵션을 설정하고 싶다면 여기에서
 plugins: [
  require('postcss-import')({
    path: ['app/assets/']
  }),
  ... // 사용하고자 하는 플러그인들을 하나씩 적어넣는다.
 ]
})

혹은 Object 형식을 사용할 수도 있다.

module.exports = (ctx) => ({
 plugins: {
  'postcss-import': {
    path: ['app/assets/']
  },
  ... // 사용하고자 하는 플러그인들을 하나씩 적어넣는다.
 ]
})

PostCSS의 유일한 단점이 여기에서 드러나는데, 플러그인들을 하나씩 끼워서 설정해야 하기 때문에, 플러그인의 적용 순서가 매우 중요하다. 만약 순서를 잘못 설정했다면, 일부 기능이 동작하지 않을 수도 있다. 대부분의 경우 Readme.md에 이런 플러그인들 뒤에 설정하세요 라고 설명하고 있으니 이 점만 주의하자.

자세한 설정 방법은 postcss-load-config 에 나와있으니, 여기를 참고하자.

Entry point 설정

CSS 파일들이 따로 분리되어있다면, JS의 entry point(index.js나 app.js 같은 파일을 사용하고 있을 것이다)에 import '/somewhere/index.css' 로 웹팩이 같이 빌드할 수 있도록 안내해주자. 만약 컴포넌트별로 CSS를 따로 관리하고 있다면, 해당 컴포넌트에 import './thisComponent.css' 를 설정해주면 JS 번들링 시에 함께 CSS번들링이 진행된다.