rpx-transform-loader（WIP）

A webpack loader that can transformed rpx to vw unit for vue's sfc.

Usage

Add the rpx-transform-loader to module.rules options in webpack.config.js:

1// webpack.config.js
2module.exports = {
3	// ...
4	module: {
5		rules: [
6			use: /\.vue$/,
7			loader: "rpx-transform-loader"
8		]
9	}
10	// ...
11}

If you use vue-cli, and you can used it in vue.config.js like this:

1// vue.config.js
2module.exports = {
3  // ...
4  chainWebpacl: (config) => {
5    config.module
6      .rule("vue")
7      .use("rpx-transform-loader")
8      .loader("rpx-transform-loader")
9      .end();
10  },
11};

Options

The Options type definition:

1interface LoaderOptions {
2  unit: string
3  width: number
4  precision: number
5  outUnit: string
6}

The meaning of each paramter:

name	introduce	type	default
unit	transformed unit's name	string	rpx
width	the width of the design draft	number	750
precision	the calculation accuracy	number	5
outUnit	the unit after transform	string	vw