postcss-weex
postcss-weex
主要解决三个问题:
- 解决weex样式不支持简写;
- 解决weex样式与H5样式不一致;
- 解决不能使用绝对尺寸;
安装
$ npm install postcss$ npm install postcss-weex
使用
只需要在webpack
的配置文件中增加相关配置即可。
对于web
// for webpack2 var prefixer = ;var weexCSS = ; test: /\.vue?$/ loader: `vue-loader` options: /** * important! should use postTransformNode to add $processStyle for * inline style normalization. */ compilerModules: { elstaticStyle = `$processStyle()`; elstyleBinding = `$processStyle()`; } postcss:
对于weex
// for webpack2 var weexCSS = ; test: /\.vue?$/ loader: `weex-loader` options: postcss:
选项
支持以下选项:
- env: 编译环境,
weex
或者vue
,默认为weex
; - relLenUnit: 相对长度单位,默认为
px
; - absLenUnit: 绝对长度单位,默认为
pt
; - baseDpr: 使用绝对长度单位时的换算基数,默认为
2
,即设计稿宽度为750时,1pt最终为1px; - remUnit: 使用相对长度单位时的换算基数,默认为
75
,即设计稿宽度为750时,1px最终为(1 * 2 / 75)rem; - remPrecision: 转rem时保留的小数位数。
功效
样式简写
只针对weex不支持的写法,并不能解决weex不支持的样式属性问题。
- padding简写
- margin简写
- border简写
- background简写
- border-radius简写
样式不一致
在weex中,所有尺寸都会根据实际屏幕宽度基于750px
进行缩放,但是对于H5页面却并非如此。postcss-weex
插件可以在进行H5页面打包时,将所有px
单位转换为rem
单位来达到同样的效果。
为了生成正确的
meta
,你需要在HTML模板中手动引入flexible。
绝对单位
在weex中,有一个文档并未提及的单位wx
,当使用这个单位时,尺寸不会进行缩放。postcss-weex
支持使用pt
单位(可使用options.absLenUnit来设置,默认使用pt
而非wx
主要是为了在ide
中不会有错误提示),在weex中会自动转为wx
,在H5中自动转为px
。
important
在weex中,设置!important
会使样式失效,但是因为weex-vue-render
样式优先级的问题,有些情况下必需使用!important
才能解决问题(如设置文本margin),因此会对!important
作特殊处理,在weex
中删除掉!important
。