postcss 적용할 때 autoprefixer가 적용안될 경우 postcss-fail-on-warn 플러그인을 이용하자

autoprefixer 설정하고 아무 에러가 없는데, build된 css 파일 내에 prefix가 붙지 않았을 때 해결했던 과정

9 min readApr 1, 2020

CSS in JS를 쓰지 않고 postcss를 적용한 이유

다노샵은 SCSS를 사용하고 있습니다. React로 짜여있기 때문에 CSS in JS 스타일 라이브러리를 사용하는게 찰떡이라고 생각해서 사실 처음에는 styled-component를 적용해볼까 했습니다. 리서치를 해보니 CSS in JS는 벤더 프리픽스* (vendor prefix)가 가능하고, css를 유닛테스트까지 해볼 수 있다는 장점이 있어서 굉장히 혹했거든요.

하지만 데이터를 수집함에 있어서 현재 GTM(google tag manager)를 사용하고 있고, GTM이 element의 id, class name, DOM tree구조에 의존성이 있는 상황이라 CSS in JS를 적용하지 않았습니다. 바꾸고 나서 GTM에 설정한 값들이 제대로 동작하는지 테스트하는 게 큰 부담이 되었거든요.

* 벤더 프리픽스: -moz-, -webkit-, -o-, -ms- 같이 CSS속성 중 브라우저에서 판독 가능한 접두어를 붙이는 것을 말합니다. transition, animation, flex 속성이 주로 벤더 프리픽스가 필요한 속성들입니다.

autoprefixer를 사용하면 왼쪽 같은 css 스타일이 오른쪽 같이 알아서 착착 바뀝니다.

하지만 IE, webkit계열, 오페라 브라우저를 대응하기 위해 css 작업할 때마다 prefix를 붙여주는 것은 굉장히 귀찮았습니다. 특히 IE(하…)를 위해 누군가 알아서 착착 필요한 속성에 prefix를 달아주면 좋겠다고 생각해서 이번에 postcss를 적용하게 되었습니다.

설정은 쉽습니다!

webpack 공식문서나 postcss-loader github을 들어가면 설정방법은 친절하게 설명되어 있습니다. 한글로 구글링해도 설정방법은 많이 나오더라고요 :)

webpack.config.js

Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.
postcss-loader는 css-loader와 style-loader 다음 줄에 써주세요. 만약 sass-loader, less-loader, stylus-loader 같은 전처리기(preprocessor)를 사용하고 있다면, 이 전처리기 윗 줄에 postcss-loader를 사용해주세요.
— webpack 공식문서 중 postcss-loader 설명 중 일부.

package.json

autoprefixer 깃헙에서는 .browserlistrc 또는 package.json에 browerslist 키로 브라우저를 특정하라고 나와있는데, browserlist github은 package.json에 browerslist키를 추가하는 법을 권하고 있어서 package.json에 브라우저 리스트를 추가해줬습니다.

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like > 5% (see Best Practices).
The best way to provide browsers is a .browserslistrc file in your project root, or by adding a browserslist key to your package.json.
Autoprefixer는 Browserslist를 이용하고 있기 때문에 여러분이 원하는 브라우저 타켓을 쿼리문(예. > 5%)을 이용해서 지정할 수 있습니다. (모범 사례를 보려면 여기를 보세요.)
브라우저 목록을 제공하기 가장 좋은 방법은 프로젝트 root에 .browserslistrc 파일을 생성하거나 package.json 파일에 browserslist key를 추가하는 것입니다.
— autoprefixer github README.md 중 Browser에 대한 설명.

Browserslist will use browsers and Node.js versions query from one of these sources:
1.browserslist key in package.json file in current or parent directories. We recommend this way.
2..browserslistrc config file in current or parent directories.
3. browserslist config file in current or parent directories.
4. BROWSERSLIST environment variable.
5. If the above methods did not produce a valid result Browserslist will use defaults: > 0.5%, last 2 versions, Firefox ESR, not dead.
Browserslist는 아래 소스 중 하나로 브라우저와 Node.js 버전 쿼리를 이용합니다.
1. 현재 또는 상위 폴더의 package.json 파일 내부에 있는 browserslist 키. 이 방법을 추천합니다.
2. 현재 또는 상위 폴더 안에 있는 .browserslistrc 설정 파일.
3. 현재 또는 상위 폴더 안에 있는 browserslist 설정 파일.
4. BROWSERSLIST 환경 변수.
5. 위 방법에 해당하는 것이 없다면 Browserslist는 이러한 기본값을 사용합니다 > 0.5%, last 2 versions, Firefox ESR, not dead .
— browserslist github README.md 중 Queries에 대한 설명.

postcss.config.js

저는 3개의 플러그인을 사용했습니다.

postcss-flexbugs-fixes: flexbox의 크로스 브라우징 이슈해결을 도와주는 플러그인입니다.
autoprefixer: browserslist에 설정한 리스트에 맞춰서 -webkit-, -moz-, -o-, -ms- 같은 벤더 프리픽스를 붙여줍니다.
postcss-fail-on-warn: 이 플러그인 위에 적힌 플러그인들이 실행될 때 warning이 뜨는 경우에는 error를 내게 됩니다. autoprefixer 플러그인을 설정해도 css 파일에서 벤더 프리픽스가 붙지 않았다면 이 플러그인을 설치해주어서 에러 로그를 보고 css파일을 수정하는 것이 좋습니다 🙂

bundle된 css 파일에 제대로 vendor prefix가 적용되어 있지 않을 땐 postcss-fail-on-warn 플러그인을 추가하자! 🙂

처음에는 postcss.config.js에 autoprefixer 플러그인만 설치했습니다. 그리고 npm run build를 했는데, output으로 나온 css파일을 열어봤지만 벤더 프리픽스가 붙은 것도 있고, 안붙은 것도 있었습니다. bundling하는 과정에 아무 에러가 없었기 때문에 잘 이해가 안되더라고요..😨

검색, 검색, 또 검색하다 postcss github에서 postcss-fail-on-warn 플러그인의 존재를 알게 됐습니다. 빌드시 warning이 발생되면 바로 에러를 뱉어주는 녀석입니다. 제대로 된 autoprefixer 플러그인 적용을 위해서는 이 플러그인을 추가해두는 게 좋을 것 같습니다!

postcss-fail-on-warn로 Error를 뱉었는데 어디가 문제인지 잘 못찾겠다면, sass-loader에 sourceMap을 true로 설정하자! 🙂

core.scss의 6224번째 줄……? 내가 가진 core.scss는 400 줄이 안되는데…? start value has mixed support, consider using flex-start instead 라며 친절한 에러가 떴다..

Error를 내뱉게 하는 것까지는 좋았는데, core.scss의 6224번째 줄에 이슈가 있다는 메시지가 떴습니다.

문제는 core.scss는 내부에 @import 문법을 사용했기 때문에… 6224번째 줄이 도대체 무엇인지 병아리는 알기 어려웠습니다 🙃 (망했…)

// 아주아주 많은 import가 있는 core.scss....@import "navigation";
@import "header";
@import "categoryList";
@import "search";...(이 뒤에 더 많은 @import가 있음 헤헤헤헤)

여러 시도와 구글링 끝에 webpack 공식 문서에서 답을 찾았습니다!

webpack의 loader에는 옵션을 줄 수가 있는데, postcss-loader가 진행되기 전 loader인 sass-loader에 sourceMap 옵션을 true로 설정하면 빌드 중 어떤 scss에서 문제가 있는 건지 추적이 가능하더라고요 :)

// 이런식으로 sourceMap 옵션 값을 true로 줍니다!
{
  loader: "sass-loader",
  options: {
    sourceMap: true,
  },
},

core.scss의 6224번째 줄은 사실 _danoModal.scss의 73번째 줄이었다!

이렇게 고쳤더니 별다른 에러 없이 scss 파일이 벤더 프리픽스가 적용된 css파일로 잘 컴파일되었습니다 🎉