PostCSS란 무엇이며 왜 신경을 써야 합니까?

PostCSS 공식 웹사이트를 방문하면 다음 프로젝트에서 PostCSS를 사용하려는 이유에 대한 아이디어를 얻을 수 있습니다.

A tool for transforming CSS with JavaScript

또한 출시되지 않은 일부 기능, 축소 등을 활성화하고 우리의 삶을 훨씬 쉽게 만들어주는 플러그인도 함께 제공됩니다.

코드 가독성 향상

Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.

즉, Firefox, Chrome 및/또는 Safari를 지원하기 위해 특정 접두사를 적용할 필요가 없으며 PostCSS가 이를 수행합니다.

내일의 CSS를 오늘 사용하세요

PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb.

PostCSS가 브라우저에서 지원할 수 있도록 현재 CSS 구문으로 변환할 CSS의 향후 릴리스 버전을 사용할 수 있습니다.

글로벌 CSS의 종말

CSS Modules means you never need to worry about your names being too generic, just use whatever makes the most sense.

styled components와 같이 다른 클래스와 충돌하지 않도록 마지막에 고유한 직렬을 추가하는 클래스를 생성합니다.

CSS의 오류 방지

Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS.

PostCSS 시작하기

모든 종속성과 함께 package.json를 설정하는 것으로 시작하겠습니다.
package.json를 생성하려면 터미널에서 명령을 실행하기만 하면 됩니다.

npm init -y

다음으로 PostCSS 종속성을 추가합니다. postcss 및 postcss-cli가 필요합니다.

npm i postcss postcss-cli

PostCSS가 실제로 실행되고 변경 사항을 확인하려면 package.json 파일에 스크립트를 추가해야 합니다.

폴더 구조

...
"scripts": {
    "dev:watch": "postcss src/style.css --dir public --watch"
  },
...

첫 번째 플러그인 사용

우리가 사용할 첫 번째 플러그인은 postcss-import이며 SASS particles에 익숙하다면 CSS와 동일하므로 의미가 있을 것입니다.

This plugin can consume local files, node modules, or web_modules.

설치하기 위해서

npm i postcss-import

플러그인을 사용하려면 프로젝트의 루트에 postcss 구성 파일을 추가해야 합니다.
postcss.config.js


이제 다른 CSS 파일을 styles.css 파일로 가져올 수 있습니다. 그러면 PostCSS가 구문 분석하여 단일 출력 파일에서 스타일을 사용할 수 있습니다.
src/styles.css

public/styles.css


CSS를 축소하여 .css 파일의 크기를 줄일 수도 있습니다. 이를 위해서는 cssnano 플러그인이 필요합니다.

npm i cssnano

그런 다음 플러그인을 postcss.config.js 파일에 추가합니다.
postcss.config.js


꽤 깔끔하죠?

향후 CSS를 활성화하기 위해 PostCSS Preset Env 라는 플러그인도 있습니다. 이 플러그인은 출시되지 않은 CSS 선택기를 사용하여 현재 사용 가능한 CSS로 변경합니다. 자세한 정보는 PostCSS Preset Env에서 확인하세요.

이 플러그인을 설정하는 것은 사용하려는 CSS 단계를 지정해야 하므로 조금 더 많은 작업이 필요합니다. 우리는 stage 1를 사용하여 & selector와 같이 클래스 내부에서 SASS를 활성화합니다.

플러그인을 설치하려면

npm i postcss-preset-env

이제 미래의 CSS를 만듭니다.



자세히 살펴보면 현재 사양에 유효한 CSS가 아닙니다. 그러나 PostCSS의 출력을 보면 현재 사양의 CSS로 변경된 것을 볼 수 있습니다.



PostCSS에는 해당 사이트에서 탐색할 수 있는 다양한 플러그인이 있습니다plugins website.

TailwindCSS도 내부적으로 PostCSS를 사용합니다. PostCSS는 매우 강력한 도구이며 올바르게 사용할 수 있다면 게임 체인저가 될 수 있습니다.