0. 개념
- vendor prefixer 또는 공급업체 접두사라고 불린다.
- 개발을 하다보면 아직 웹 표준이 되지 않은 CSS3의 최신 또는 실험 기능을 사용하는 경우가 생긴다.
- 이때, 최신버전의 브라우저는 해당 기능을 소화할 수 있을 수도 있지만 구버전의 브라우저는 해당 기능을 소화하지 못하기 마련이다.
- 이러한 호환성 문제를 해결하기 위해 사용하는 것이 vendor prefixer 또는 auto-prefixer 라고 한다.
1. main.scss 파일 내용 수정
$color--black: #000;
$color--white: #fff;
body {
background-color: $color--black;
h1 {
color: $color--white;
font-size: 40px;
display: flex;
}
}
- 개발환경으로 프로젝트를 실행하여 브라우저의 개발자 도구를 통해 SCSS가 잘 적용 되었는지 확인한다.
2. 패키지 설치하기
- 터미널 입력: npm i -D postcss autoprefixer postcss-loader
a) webpack.config.js에 추가하기
- webpack.config.js 파일의 module 부분에 방금 설치한 postcss-loader 패키지를 추가해준다.
module: {
rules: [
{
test: /\.s?css$/,
// .scss 또는.css 확장자를 갖는 파일을 찾는 정규표현식
// 물음표를 붙이면 있을수도 없을수도 있다는 뜻 ==> s가 있거나 없을 수도 있다.
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
- 패키지가 읽히는 순서는 다음과 같다.
1. 작성한 scss를 sass-loader를 통해 컴파일 한다
2. postcss-loader를 통해 브라우저에 따라 알맞는 css로 컴파일 한다.
3. 컴파일된 css를 css-loader로 읽는다.
4. css-loader로 읽힌 css를 style-loader를 통해 index.html에 삽입한다.
b) package.json에 추가하기
- package.json 아래쪽에 다음과 같이 browserlist를 명시한다.
"browserslist": [
"> 1%",
"last 2 versions"
]
- 전세계 1프로 이상이 사용하는 브라우저의 마지막 2개 버전을 지원한다는 것을 의미한다.
3. .postcssrc.js 파일 생성
- 파일 명 맨 앞에 마침표(.postcssrc.js)가 있음을 주의하자.
- 루트 경로에 .postcssrc.js 라는 파일을 생성한다.
- 다음과 같이 구성옵션을 명시한다.
module.exports = {
plugins: [
require('autoprefixer')
]
}
4. 브라우저에서 확인
- 개발 환경에서 프로젝트를 실행하여 개발도구를 통해 확인한다.
- 다음과 같이 나오면 올바르게 설정이 완료된 것이다.
댓글