CSS를 자동 접두사로 추가하고 축소하는 방법은 무엇인가요?

공급업체 접두사 추가와 함께 처음부터 CSS를 작성하는 것은 수동으로 수행하는 경우 어려운 작업이 될 수 있습니다. 공급업체 접두사는 PostCSS의 autoprefixer 플러그인을 사용하여 쉽게 추가할 수 있습니다.

또한 CSS 파일이 렌더링을 차단할 수 있으므로 CSS 파일의 크기를 계속 확인해야 하므로 CSS 파일의 크기도 중요합니다. 이것은 cssnano가 편리한 곳입니다.

이 자습서에서는 PostCSS, autoprefixer 및 cssnano를 공급업체 접두사로 구성 및 설정하고 CSS를 축소할 수 있습니다.

전제 조건

• Install nodejs

PostCSS 설치

CSS를 수정하고 변환하는 도구입니다. PostCSS용 플러그인이 너무 많아 CSS 압축부터 새 CSS 기능 사용까지 모든 종류의 작업을 즉시 수행할 수 있습니다.

공급업체 접두사를 추가하고 CSS를 축소하기 위해 여러 postcss 플러그인을 사용할 것입니다. 하지만 먼저 postcss-cli를 설치해야 합니다.

npm i -g postcss-cli

postcss 패키지는 npm 에서 설치할 수 있습니다.

npm i postcss postcss-cli --save-dev

자동접두사 CSS

Autoprefixer 플러그인은 Can I use을 사용하여 브라우저 지원을 검색하고 그에 따라 CSS 속성에 공급업체 접두사를 추가합니다. npm에서 autoprefixer를 설치할 수 있습니다.

npm i autoprefixer --save-dev

이제 다음 명령을 사용하여 CSS 파일에 자동 접두사를 붙일 수 있습니다.

postcss src/styles/*.css -u autoprefixer --dir src/prefixed --no-map

위의 명령은 .css 디렉토리 내의 모든 styles 파일을 구문 분석하고 -u autoprefixer를 사용하여 파일을 자동 접두어로 수정하고 prefixed 디렉토리에 출력합니다. --no-map 인수는 선택 사항입니다. 소스 맵을 생성하려면 --no-map 인수를 제거하십시오.

접두사를 붙이기 전의 CSS 파일:

* {
    margin: 0;
    box-sizing: border-box;
    text-size-adjust: auto;
}

접두사를 붙인 후:

* {
    margin: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: auto;
       -moz-text-size-adjust: auto;
            text-size-adjust: auto;
}

CSS 축소

cssnano 플러그인은 CSS를 축소/압축하여 생산용으로 적합하게 만들 수 있습니다.
다음 명령을 사용하여 cssnano 플러그인을 설치합니다.

npm i cssnano --save-dev

다음 명령을 사용하여 이미 공급업체 접두사가 붙은 CSS 파일을 축소합니다.

postcss src/prefixed/*.css -u cssnano --dir src/minified --no-map

prefixed 디렉토리에 있는 모든 파일을 축소하고 minified 디렉토리로 출력합니다.

최종 결과는 다음과 같습니다.

*{-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;box-sizing:border-box;margin:0}

보너스

하나의 단일 명령을 사용하여 자동 접두사를 지정하고 CSS를 축소할 수 있습니다.

postcss src/styles/*.css -u autoprefixer cssnano --dir src/styles/production --no-map

결론

공급업체 접두사와 축소는 CSS 제작 준비를 위해 확인해야 하는 중요한 상자 중 일부입니다. PostCSS를 사용하면 CSS로 많은 일을 할 수 있습니다. postcss에서 사용할 수 있는 다양한 awesomeplugins이 있습니다.

This post was originally published in Syntackle