Vue.JS에 PostCSS 설치하기

이번 글에서는 Vue.JS에 PostCSS를 설치하는 방법을 적어보려 한다.

(Vue cli 가 설치된 상태를 가정하고 진행하도록 하겠다.)

1. webpack.config.js

	module.exports = {
	module: {
	rules: [
	{
	test: /\.css$/,
	use: [ 'style-loader','postcss-loader' ]
	}
	]
	}
	}

view raw webpack.config.js hosted with ❤ by GitHub

'test : ' 의 경우는 어떤 파일 확장자를 사용할것인지를 의미한다.(위의 소스에서는 CSS만 적용되도록)

'use : ' 의 경우는 어떤 loader를 사용할것인지를 의미한다.

 - style-loader : javascript로 변경된 CSS를 동적으로 돔에 추가하는 loader. CSS 를 JS로 변환한뒤 다시 CSS로 재가공 하는 PostCSS의 경우 필수적이다.

 - postcss-loader : PostCSS를 사용하기 위해 추가.

2. postcss.config.js

	module.exports = {
	plugins: [
	require('autoprefixer')({
	browsers: ['> 1%', 'last 4 versions'],
	})
	}

view raw postcss.config.js hosted with ❤ by GitHub

'require()' 에는 ()안에 본인이 쓰고자 하는 플러그인의 이름을 넣어주면 된다. 그 안에는 옵션을 적어주면 된다.

위의 소스는 autoprefixer 라는 플러그인을 사용하고자 require('autoprefixer') 라고 입력 후, browsers: ['> 1%', 'last 4 versions'] 라는 옵션 값을 넣어주었다.