背景
众所周知，在weex开发中，CSS的书写一直是一个痛点。主要表现如下：
支持的CSS属性有限；
不支持简写，例如不支持
margin: 10px 0，必需要分开写上下左右四个方向的margin；在weex中尺寸会根据实际屏幕尺寸基于
750px自动缩放，而web页面不会，造成视觉效果不一致；有一些尺寸(如字体，边框)不需要自动缩放。
解决思路
对于问题1，受限于weex底层的实现，目前并没有办法能够解决。
对于问题2，只需要分开写即可，但是分开写多多少少会有些不便，同时因为前端开发人员通常都已经习惯了简写的方式，很容易忘记分开写。如果有一个工具能够对写好的CSS做自动转换，那么问题就解决了。
对于问题3，可以联想到weex中的布局方案其实与手淘的flexible布局方案如出一辙，因此只需要一个工具实现同等转换，将CSS中的px转成rem即可。
对于问题4，weex支持一个未在文档中提及的单位wx，使用wx单位的尺寸不会进行缩放，但是需要一个工具对web页面进行等同处理，否则还是无法达到一致。
解决方案
由上可知，其实只需要对CSS作一些转换，就可以完美解决问题2、3、4。而最简单地实现方式，就是基于postcss去制作插件。因为postcss除了将CSS文件抽象成AST，还提供了对AST的遍历，我们只需要传入一个回调函数来对接收的内容作简单的处理即可。同时postcss还提供了一些实用的API来操作AST，于是基于postcss的插件postcss-weex便应运而生了。
因此，你只需要在你的webpack配置文件中添加postcss-weex的相关配置即可。
对于web
var prefixer = require('autoprefixer');
var weexCSS = require('postcss-weex');
{
test: /\.vue(\?[^?]+)?$/,
loader: `vue-loader`,
options: {
/**
* important! should use postTransformNode to add $processStyle for
* inline style normalization.
*/
compilerModules: [
{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`;
el.styleBinding = `$processStyle(${el.styleBinding})`;
}
}
],
postcss: [
weexCSS({env: 'web'}),
prefixer({ browsers: ['last 20 versions'] })
]
}
}
对于weex
var weexCSS = require('postcss-weex');
{
test: /\.vue(\?[^?]+)?$/,
loader: `weex-loader`,
options: {
postcss: [
weexCSS({env: 'weex'})
]
}
}
最后，为了正确生成meta，你还需要在html模板中引入flexible。
