-
PostCss + Autoprefixer 추가하기Webpack 2022. 4. 13. 15:23
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": [ "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 } } ] } ] }
'Webpack' 카테고리의 다른 글
webpack 환경설정 (0) 2022.03.04