在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”或扫描下面的二维码