Vite 및 Webpack에서의 PostCSS

Vite에서의 PostCSS

// postcss.config.js
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

export default {
  plugins: [
    autoprefixer,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : false
  ].filter(Boolean)
};

Vite CSS 옵션

// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
});

webpack에서의 PostCSS

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              }
            }
          }
        ]
      }
    ]
  }
};

구성 파일을 사용하는 postcss-loader

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      config: './postcss.config.js'
    }
  }
}

Vite에서 Sass와 함께 사용하는 PostCSS

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

plugins: [
  require('postcss-preset-env')({
    stage: 3, // use stage 3+ features
    features: { 'nesting-rules': true }
  })
]

PostCSS와 CSS Modules

// vite.config.js
export default {
  css: {
    modules: { localsConvention: 'camelCase' },
    postcss: { plugins: [autoprefixer()] }
  }
}

PostCSS 적용 여부 확인

대안으로 사용하는 LightningCSS

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  }
}

프로덕션 빌드 최적화

빠른 확인

복습