Wondering what’s next for npm?Check out our public roadmap! »

    postcss-weex

    1.0.6 • Public • Published

    postcss-weex

    postcss-weex主要解决三个问题:

    1. 解决weex样式不支持简写;
    2. 解决weex样式与H5样式不一致;
    3. 解决不能使用绝对尺寸;

    安装

    $ npm install postcss
    $ npm install postcss-weex

    使用

    只需要在webpack的配置文件中增加相关配置即可。

    对于web

    // for webpack2
     
    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

    // for webpack2
     
    var weexCSS = require('postcss-weex');
     
    {
        test: /\.vue(\?[^?]+)?$/,
        loader: `weex-loader`,
        options: {
            postcss: [
                weexCSS({env: 'weex'})
            ]
        }
    }

    选项

    支持以下选项:

    • 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

    Keywords

    Install

    npm i postcss-weex

    DownloadsWeekly Downloads

    21

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar