HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive/
PostCSS, Autoprefixer

PostCSS, Autoprefixer

Tags
CSS
Study Date
Nov 30, 2023
Status
Done
생성 일시
Nov 30, 2023 08:15 AM
Day
51
  • PostCSS : css 후처리도구, but 어떤 결과를 낼지는 관여x
  • Autoprefixer : -webkit-, -ms- 같이 공급업체 접두사를 후처리해서 붙여주는 플러그인
 
  1. postcss, autoprefixer, postcss-loader 를 개발 의존성으로 설치
  1. webpack.config.js 에서 postcss-loader 모듈 사용 선언
  1. postcss.config.js 에서 autoprefixer 플러그인 사용 선언
바벨로 css, js를 번들링하기
  • 'style-loader', 'css-loader' 를 개발 의존성으로 설치
 
..
		use: [
			'style-loader', 
			'css-loader',
			'postcss-loader'
		]
module.exports = {
	plugins: [
		require('autoprefixer')
	]
}
import './main.css'
main.js
module.exports = {
	entry: './main.js',
	..
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader', //html style태그로 넣어줌
					'css-loader' //css를 읽음
				]
			}
		]
	}
}
webpack.config.js