1. 공급 업체 접두사(Vender Prefix)

• 표준기술을 제공하지 못할 경우 시범 테스트로 만들어진 기술을 사용할 수 있도록 접두사에 특정 구문을 입력한 것

--webkit-box
mx-flexbox
...

2. package 설치

npm i -D postcss autoprefixer

01. package.json 추가하기!

• browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시할 용도
• 그 명시를 Autoprefixer 패키지가 활용하게 된다
  

{
  "name": "parcel-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "10.2.5",
    "parcel-bundler": "1.12.5",
    "parcel-plugin-static-files-copy": "2.6.0",
    "postcss": "8.2.13",
    "sass": "1.32.11"
  },
  "staticFiles": {
    "staticPath": "static"
  },
  // browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시할 용도
  // 그 명시를 Autoprefixer 패키지가 활용하게 된다
  "browserslist" : [
    "> 1%", // 전세계에 점유율 1% 이상인 모든 브라우저
    "last 2 versions" // 해당 브라우저의 마지막 2개 버전까지 지원을 하겠다
  ]
}

02. .postcssrc.js 생성

• 뒤에 rc(Runtime Configuration의 약어)가 붙은 파일은 구성 파일을 의미한다
• .(마침표)로 시작하는 파일은 구성 파일 또는 숨김 파일을 뜻 함
• ESM(EcmaScript Module), 불러오기(import), 내보내기(export)
• Node.js에서는 ESM을 지원하지 않고 CommonJS를 지원 그렇기에 import -> require(), export -> module.exports
• ESM -> 브라우저
• .postcssrc.js는 어떠한 내용들을 번들러를 통해서 변환하여 사용하기 때문에 브라우저에서 동작하는것이 아닌 서버인 node 환경에서 동작하기에 ESM이 아닌 CommonJS 형식으로 사용
  

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

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

• 간략하게
  

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

03. Error(version 충돌)

• autoprefixer down grade

npm i -D autoprefixer@9

• npm run dev
  • 확인을 위해 main.scss에 h1에다가 display : flex; 속성 주기

$color--black : #000;
$color--white : #fff;

body {
    background-color: $color--black;
    h1 {
        color: $color--white;
        display: flex;
    }
}