在寫 vue 組件樣式時，有時為了兼容需要不停的寫 -webkit-，即使複製粘貼也不能提升我們碼 css 的幸福感，又有時我們想使用一下 BEM 風格的命名，但是長長的名稱外加分隔符敲起來十分煩人。
其實在 vue-loader 中僅需要簡單的配置即可拯救我們。
vue-loader 中 PostCSS 配置
vue-loader 中使用了 PostCSS 來處理 css，如下圖所示：
上圖為 vue-loader 9.x、webpack 1.x 中配置方法
autoprefixer 使用
對於 autoprefixer 功能來說，使用起來則更為方便了。當我們使用 vue-cli (最新版)創建好 vue 項目時，在 build/webpack.base.conf.js 中可以看到 vue-loader 的中已經默認加入了 autoprefixer 的配置，如下圖所示：
我們僅需要做的是配置好 autoprefixer 中的選項。
vue-cli 工具默認給出的是 』last 2 versions』，即主流瀏覽器的最新兩個版本。
對於移動端來說很多 css3 屬性需要加 -webkit- 前綴來說，這個配置目前是不夠的。
可以根據我們的需求增加，如『Android >= 4.0』(安卓大於4.0版本)，』ChromeAndroid>5%』(chrome 和 android webview 全球統計有超過 5% 的使用率)等等。
例如我們使用如下配置：
vue 組件中 css 如下：
編譯出來後會得到如下結果：
如此就可以放心的不寫 -webkit- 了。
postcss-cssnext 使用
1. 首先使用 npm install postcss-cssnext 安裝插件。
2. 在 vue-loader 的 postcss 中加入 postcss-cssnext。
注意
cssnext 插件中已經包含了 autoprefixer ，所以這裡不用再引入autoprefixer。
配置完成後，來試一試 cssnext 功能。
vue 組件中 css 如下：
編譯後：
postcss-bem 使用
使用 bem 風格來對 css 進行命名時，名稱雖然清晰，但是長名稱外加分割線，寫起來略微不爽。
在 vue 中使用 postcss 命名時，可以使用 postcss-bem 來簡化我們的書寫，而且配置起來也十分方法。
1.安裝 bem 的插件 npm install saladcss-bem
2.在 vue-loader 的 postcss 中引入 postcss-bem
配置完成後，就可以用簡化的方式來書寫 bem 風格的 css 了
vue 組件中 css 如下：
編譯後結果：
補充：
https://github.com/vuejs/vue-loader/blob/master/docs/en/features/postcss.md vue-loader對PostCSS使用介紹
https://autoprefixer.github.io/ autoprefixer在線編譯，可以用來測試browers配置是否正確
https://github.com/ai/browserslist#queries browserlist 參數詳解
http://cssnext.io/usage/ cssnext使用
https://github.com/saladcss/saladcss-bem posts-bem插件