作者：滴滴公共前端團隊 - J
在寫 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 如下：
編譯後結果：
補充：
github.com/vuejs/vue-l… vue-loader對PostCSS使用介紹
autoprefixer.github.io/ autoprefixer線上編譯，可以用來測試browers配置是否正確
github.com/ai/browsers… browserlist 引數詳解
cssnext.io/usage/ cssnext使用
github.com/saladcss/sa… posts-bem外掛
歡迎關注DDFE公眾號
微信搜尋公眾號“DDFE”或掃描下面的二維碼
