Parcel - autoprefixer

• npm i -D postcss autoprefixer
• pacakge.json에 browserslist 옵션 설정
  • browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도
  • 이 옵션을 autoprefixer 패키지가 활용하게 됨

 

// package.json
{
  "name": "parcel-bundler-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "postcss": "^8.3.0",
    "sass": "^1.34.0"
  },
  "staticFiles": {
    "staticPath": "static"
  },
  "browserslist": [
    "> 1%",                // 전세계 점유율이 1% 이상인 모든 브라우저
    "last 2 versions"    // 마지막 2개의 버젼
  ]
}

 

• .postcssrc.js 파일 생성
  • rc(Runtime Configuration의 약어)가 붙은 파일은 구성 파일을 의미

// rc 구성파일은 node.js 환경에서 사용하는 파일이므로 import 대신에 require. export 대신에 module.exports 사용
// const autoprefixer = require('autoprefixer');

// module.exports = {
//   plugins: [autoprefixer],
// };

// .postcssrc.js
module.exports = {
  plugins: [require('autoprefixer')],
};

 

• 아래와 같이 에러 발생 시, autoprefixer downgrade
  • npm i -D autoprefixer@9
    
    

 

• main.scss 에 flex 옵션 추가
  • 아래와 같이 autoprefixer 적용됨