PostCSS 입문



PostCSS란?


  • PostCSS · A tool for transforming CSS with JavaScript
  • PostCSS 자체는 CSS 파서의 기능 만 제공합니다
  • 플러그인을 사용하여 CSS를 처리하거나 구문 검사를 수행합니다

  • 추천 플러그인


  • Autoprefixer
    가장 유명한 PostCSS 플러그인.
    지정된 브라우저 대응에 필요한 벤더 프리픽스의 부여를 자동적으로 행할 수 있다.
  • PostCSS Flexbugs Fixes
    Flex Box의 기술 방법에 따라서는, 브라우저의 버그에 의해 잘 반영되지 않는 경우가 있기 때문에,
    브라우저 버그를 방지하는 설명으로 변환
  • cssnano
    CSS를 압축 할 수 있습니다
  • stylelint
    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': ,
          }
        }
      }
    }
    

    .browserslistrc
    last 4 versions
    
    $ npx postcss src/**/*.css -d src
    

    PostCSS는 자동으로 .postcssrc.js를 참조하므로 CLI에서 사용할 플러그인을 지정하지 않아도됩니다.

    샘플 코드



    마지막으로



    실천편은 이쪽
    → → PostCSS 연습

    좋은 웹페이지 즐겨찾기