PostCSS

CSS Postprocessor(후처리기)

Postcss 컴파일 과정

SCSS로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환한다.

 

장점

모듈식 사용

• 필요한 플로그인만 포함하여 사용할 수 있다.
• 전체를 다 포함하지 않아도 되므로 속도가 빠르다. (해당 페이지에 필요한 모듈만 갖다쓸 수 있다는…)

JavaScipt 기반

• 필요한 플러그인을 직접 개발할 수 있다.

CSS 표준 문법 기반

• CSS 작성을 위해 별도로 학습할 필요가 없다.

단점

(Sass에 비해) 강력한 문법을 제공하지 않는다.

필요한 플러그인을 직접 찾아서 조립해야 한다.

플러그인 지원 중단될 수 있다.

 

웹팩 사용 시 설정

// webpack.dev.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: /\.scss$/,
                test: /\.p?css$/,   //css 파일을 선택하는 정규표현식
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {loader: "sass-loader"},
                    {loader: "postcss-loader"}   // postcss 적용하기
                ],
            }
        ]
    },
};

// postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer’),   // 자동으로 브라우저에 맞는 CSS 프리픽스를 추가해준다.
        require('postcss-nested')  // scss 방식의 nested css 지원
    ]
}