PostCSS 란

https://postcss.org/
CSS 작성을 더 편하게 만들어주는 후처리기
 => 자바스크립트를 사용하여 CSS를 변경CSS 전처리기

CSS 전처리기
화면에 보여주기 전 CSS를 변경해서 스타일을 적용
사용자가 작성하기 쉬운 코드로 작성 -> 기본 CSS 변환 -> 렌더링
ex. Scss, Stylus, Less

CSS 후처리기
화면에 보여준 뒤 CSS 스타일을 적용
기본 CSS 파일 작성 -> 렌더링 -> 외부 프로그램을 사용하여 스타일 변경
ex. PostCSS

이러한 CSS 전/후처리기는 CSS를 작성할 때 발생하는 번거로움(중복, 유지보수 등)을 줄여준다.

 

 

PostCSS 설치

npm install -D postcss postcss-loader

설치해주고 웹팩 설정에 추가해준다.

webpack.config.js

const path = require('path');
module.exports = {
    entry: {
        app: ["./src/index.js", "./src/test.js"]
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'build')
    },
    mode: 'none',
    
    module: {
        rules: [
            {
                test: /\.p?css$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {loader: "postcss-loader"}  // postcss 적용
                ],
            }
        ]
    },
};

 

 

플러그인 설치 및 적용

npm install -D <플러그인>

postcss.config.js

module.exports = {
    parser: 'postcss-scss',
    plugins: {
        <플러그인>: {},
        ...
    },
};

플러그인 순서는 위->아래이므로 실행순서를 유념해야한다.

 

PostCSS 플러그인

stylelint

CSS 문법 검사

postcss-import

@import 문법 사용 가능

postcss-for

for 문법 사용 가능

postcss-preset-env

CSS 내부 변수 및 중첩 css 사용 가능

cssnano

CSS 파일 최적화 (공백 제거, 성능 향상)

autoprefixer

-webkit- 등의 prefix 없이 스타일 지정이 가능