[Webpack] - CSS Vendor Prefix 사용하기(with Autoprefixer)

벤더 프리픽스(Vendor Prefix)

벤더 프리픽스(vendor prefix)란 크롬, 파이어폭스, 사파리 등 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.

아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다.

<style>
    .button {
        background: red;          <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
        background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
        background: -moz-linear-gradient(red, yellow);    <!-- 파이어폭스 3.6 이상을 위한 코드 -->
        background: -ms-linear-gradient(red, yellow);     <!-- 익스플로러 10.0 이상을 위한 코드 -->
        background: -o-linear-gradient(red, yellow);      <!-- 오페라 10.0 이상을 위한 코드 -->
        background: linear-gradient(red, yellow);         <!-- CSS 표준 문법 코드 -->
    }
</style>

autoprefixer 설치

공급업체 접두사를 각 속성별로 모두 외워 사용하는 것은 거의 불가능하기에 이를 자동으로 진행해주는 패키지가 autoprefixer이다.

$ npm i -D postcss autoprefixer postcss-loader

postcss, autoprefixer, postcss-loader 총 3가지 패키지를 개발용으로 설치해준다.

postcss: 스타일의 후처리를 도와주는 패키지autoprefixer: 공급 업체 접두사를 자동으로 붙여주는 패키지
postcss-loader: postcss, autoprefixer가 webpack에서 동작할 수 있도록 도와준다.

webpack.config.js

module: {
  rules: [
    {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
},
  

webpack.config.js 파일에 module 옵션에 위와 같이 코드를 입력한다.

sass-loader로 SCSS 파일을 읽어온다 ➡️ post-loader로 공급 업체 접두사를 적용, 혹은 post-css의 플러그인들을 사용 ➡️ 이들을 css-loader로 읽어들임 ➡️ style.loader로 index.html에 style 태그로 삽입할 수 있도록 함

package.json

package.json 파일에 browerslist 옵션 코딩

browerslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도이다.

// package.json
"browserslist": [
    "> 1%", // 전세게 점유율 1% 이상인 브라우저 
    "last 2 versions" // 해당하는 브라우저의 마지막 두개의 버전 까지는 지원하겠다는 옵션
  ]

.postcssrc.js 파일 생성

마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 프로젝트 내부에 만들어 준다. 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미한다.
parcel 번들러가 파일을 찾아서 구성 옵션으로 사용

Nodejs는 CommonJS를 사용한다. CommonJS에서 가져오기, 내보내기 방식은require, module.exports 이다.

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

에러가 뜬다면! 😵

autoprefixer 다운그레이드

개발 서버 실행

$ npm run dev

autoprefixer의 10버전과 PostCSS의 8버전이 충돌하여 에러 메시지가 뜬다.

undefined: PostCSS plugin autoprefixer requires PostCSS 8.

10버전인 autoprefixer를 PostCSS와 호환이 되도록 9버전으로 다운그레이드 해주면 해결된다.

$ npm i -D autoprefixer@9