Parcel - autoprefixer

구형 브라우저에서도 최신의 CSS 기술이 적용하도록 보험을 들어두기 위해 공급 업체 접두사(Vendor Prefix)를 붙여준다.

Vendor Prefix를 자동으로 붙여주는 방법

package 설치: npm i -D postcss autoprefixer

package.json 파일에 추가

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

전세계 점유율이 1% 이상인 모든 브라우저 마지막 2개 버전까지 지원하겠다고 명시해준다.

.postcssrc.js 파일을 생성

뒤에 rc(Runtime Configuration의 약어)가 붙은 파일은 구성 파일을 의미한다.

작성

// ESM -- 브라우저에서 사용하는 방법 (import, export)

// Common.JS -- node.js 환경에서 사용하는 방법 (require, exports)

// ESM -- 브라우저에서 사용하는 방법 (import, export)
// Common.JS -- node.js 환경에서 사용하는 방법 (require, exports)

// import autoprefixer from 'autoprfixer'
// const autoprefixer = require('autoprefixer');

// export {
//     plugins: [
//       autoprefixer
//     ]
// }

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

이대로 시작하면 아래와 같은 에러가 발생한다.

× D:\VsCode\Bundler\pacel-template-basic\scss\main.scss:undefined:undefined: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
Migration guide for end-users:

원인: postcss는 8버전을 사용하고 autoprefixer는 10버전을 사용하고 있기 때문이다.