PostCSS 입문
3729 단어 CSSpostcssAutoprefixer프런트 엔드
PostCSS란?
추천 플러그인
가장 유명한 PostCSS 플러그인.
지정된 브라우저 대응에 필요한 벤더 프리픽스의 부여를 자동적으로 행할 수 있다.
Flex Box의 기술 방법에 따라서는, 브라우저의 버그에 의해 잘 반영되지 않는 경우가 있기 때문에,
브라우저 버그를 방지하는 설명으로 변환
CSS를 압축 할 수 있습니다
CSS 문법 검사용 플러그인.
stylelint 플러그인을 추가하여 문법 검사 규칙을 추가할 수 있습니다.
우선 사용해 보자
$ npm init -y
$ npm install --save-dev postcss-cli autoprefixer
$ npx postcss src/**/*.css --use autoprefixer -d src
설정하기
.postcssrc.js
module.exports = ctx => {
return {
plugins: {
'autoprefixer': {
// 'env': ,
// 'cascade': true,
'cascade': false,
// 'add': true,
// 'remove': true,
'remove': false,
// 'supports': true,
// 'flexbox': true,
// 'grid': false,
// 'stats':,
// 'browsers': ,
}
}
}
}
.browserslistrclast 4 versions
$ npx postcss src/**/*.css -d src
PostCSS는 자동으로 .postcssrc.js를 참조하므로 CLI에서 사용할 플러그인을 지정하지 않아도됩니다.
샘플 코드
마지막으로
실천편은 이쪽
→ → PostCSS 연습
Reference
이 문제에 관하여(PostCSS 입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuki0410_/items/47269ce5ed6e87eb0ff6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npm init -y
$ npm install --save-dev postcss-cli autoprefixer
$ npx postcss src/**/*.css --use autoprefixer -d src
.postcssrc.js
module.exports = ctx => {
return {
plugins: {
'autoprefixer': {
// 'env': ,
// 'cascade': true,
'cascade': false,
// 'add': true,
// 'remove': true,
'remove': false,
// 'supports': true,
// 'flexbox': true,
// 'grid': false,
// 'stats':,
// 'browsers': ,
}
}
}
}
.browserslistrc
last 4 versions
$ npx postcss src/**/*.css -d src
PostCSS는 자동으로 .postcssrc.js를 참조하므로 CLI에서 사용할 플러그인을 지정하지 않아도됩니다.
샘플 코드
마지막으로
실천편은 이쪽
→ → PostCSS 연습
Reference
이 문제에 관하여(PostCSS 입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuki0410_/items/47269ce5ed6e87eb0ff6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
실천편은 이쪽
→ → PostCSS 연습
Reference
이 문제에 관하여(PostCSS 입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuki0410_/items/47269ce5ed6e87eb0ff6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)