作者:滴滴公共前端团队 - 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”或扫描下面的二维码
