autoprefixer

여러 개발 서버들에서 개발자 도구(F12)를 사용해서 적용된 css를 보면 줄이 그어져 있는 속성들을 확인할 수 있다.

즉, 현재 내가 보고 있는 화면에 해당 속성이 적용이 되지 않고 있다는 뜻인데, 그럼 왜 작성을 해두었을까??

값이 -webkit-box와 -ms-flexbox 해당 속성들은 일종의 스타일 보험이라고 볼 수 있다.

우리가 작성한 스타일이 구형 브라우저에서는 제대로 동작하지 않을 수가 있는데 이때를 대비해서 미리 보험을 들어두는 것이다. 만약 특정 브라우저에서 동작할 수 없다면 autoprefixer가 자동으로 동작할 수 있게끔 변환을 해준다.

 

어떻게 적용할까??

일단 npm i -D postcss autoprefixer 명령을 통해 postcss, autoprefixer 패키지를 개발 전용으로 설치해준다.

"browserslist": [
    "> 1%",
    "last 2 versions"
  ]

다음과 같이 작성해준다.

이전에는 import 명령을 통해 패키지를 javascript 파일로 불러왔었다. 이는 ESM 방식이다.

.postcssrc.js 파일은 Node JS 환경에서 동작을 시키는 것이므로 Node JS가 사용하는 CommonJs 방식으로 import와 export를 해줘야 한다.

Common JS 방식은 import 대신 require() 함수를 사용한다.

그리고 export 대신 module.exports를 사용한다.

 

이렇게 모든 세팅이 끝났다면 npm run dev를 통해 개발 서버에서 autoprefixer가 잘 적용되었는지 확인해보면 된다.