在VUE2.0中使用PostCSS

做者：滴滴公共前端團隊 - 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」或掃描下面的二維碼