postcss-unittrans v0.1.1

unittrans

一款postcss插件。 帮助开发者快速转换视图单位，目前支持px2rpx，px2rem。

快速开始

    # 安装
    npm i postcss-unittrans -D

gulp

使用gulp-postcss

// gulpfile.js
const {src, watch, dest} = require('gulp');
const postcss = require('gulp-postcss');
const unittrans = require('postcss-unittrans');

const rpxOption = {
    platform: 'swan',
    designWidth: 1242,
    ratio: 3
};
const plugins = [pxtorpx(rpxOption)];

// gulp task
const transformCss = () => {
    return src(css)
        .pipe(postcss(plugins))
        .pipe(dest('dist/'));
};
    
exports.dev = () => {
    const wathOpts = {
        ignoreInitial: false
    };
    watch(['**/*.css', '!dist/**'], wathOpts, transformCss);
};

webpack

使用postcss-loader

// webpack.config.js
const rpxOption = {
    platform: 'swan',
    designWidth: 1242,
    ratio: 3
};

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-unittrans')(rpxOption),
                            ]
                        }
                    }
                ]
            }
        ]
    }
}

postcss

有的朋友可能不用三方工程化工具，直接在node环境使用postcss

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-unittrans')
  ]
}

// any node file
const postcss = require('postcss');
const rpxOption = {
    platform: 'swan',
    designWidth: 1242,
    ratio: 3
};

postcss([require('postcss-unittrans')(rpxOption)])
      .process(css, {from: ``, to: ``})
      .then(result => {
        // 根据配置文件themeList,分别处理对应的文件，打包各css 文件
      })
      .catch(error => {
        throw new Error(error)
      })

options说明

Common options:

• platform: string swan小程序px2rpx模式，H5 webpx2rem模式.
• designWidth: number 设计稿的原尺寸。
• ratio: number 像素比。