PostCss + Autoprefixer 추가하기

postcss, postcss-loader, postcss-scss, autoprefixer 를 install 합니다.

npm install postcss postcss-loader postcss-scss autoprefixer -D

 

 

프로젝트 루트 레벨에 postcss.config.js 파일을 생성해주세요.

아래와 같이 작성합니다.

module.exports = {
  parser: 'postcss-scss',
  plugins: [require('autoprefixer')]
};

 

parser: 'postcss-scss'는

scss 파일에서 사용하는 한줄 주석 등을 해석할 수 있게 해주기 위해 넣어줬습니다.

// layout

.section {
	width: 100%;
    background-color: #fff;
}

 

package.json에 browserslist에 대해서도 넣어줘야합니다.

browserslist는 무엇일까요?

어떤 프로그램이 브라우저에 대응해 내부에서 처리해야 할 작업이 다르다면 옵션으로 지원 브라우저 환경을 입력받아야 하는데,

반복해서 만들게 되는 그 설정 기능만 따로 빼서 브라우저 환경을 쉽게 정의할 수 있고 또 쉽게 코드에서 사용할 수 있도록 만든 도구입니다. 그 자체만으로는 특별한 기능이 없습니다. 다른 프로그램에서 사용되기 위해 존재합니다.

Babel 에서는 브라우저에 따라 사용해야 할 폴리필의 내용이나 빌드 결과가 달라집니다. 그래서 Babel을 사용하는 프로젝트의 대응 브라우저 환경을 입력받아야 하는데 그때 브라우저스리스트가 사용됩니다.

브라우저스리스트는 브라우저 환경을 정의할 때 쿼리라는 간단한 문법을 사용합니다. 대응할 브라우저와 버전을 쉽게 정의할 수 있는데,

명시적으로 브라우저와 버전을 특정할 수도 있고 최신 버전 3개 등 이런 식으로 정의를 할 수 있습니다. 심지어 브라우저 사용 통계를 사용해 세계에서 점유율이 5% 이상인 브라우저들만 선택할 수도 있습니다. 이 통계 정보는 API 서버에서 가져오는 것이 아니라, caniuse-lite라는 브라우저 사용통계나 버전 정보를 들고 있는 프로젝트의 정적인 데이터를 사용합니다. 그래서 브라우저스리스트를 사용할 때마다 caniuse-lite 데이터를 자주 업데이트합니다. 

출처: browserslist에 대한 내용

"browserslist": [
    "last 3 version",
    "Chrome >= 59",
    "ie 11",
    "not ie <= 10"
]

 

webpack.config.js에 내용을 추가해줍니다.

module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader', // 추가
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
}