rpx-transform-loader

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:

// webpack.config.js
module.exports = {
	// ...
	module: {
		rules: [
			use: /\.vue$/,
			loader: "rpx-transform-loader"
		]
	}
	// ...
}

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

// vue.config.js
module.exports = {
  // ...
  chainWebpacl: (config) => {
    config.module
      .rule("vue")
      .use("rpx-transform-loader")
      .loader("rpx-transform-loader")
      .end();
  },
};

Options

The Options type definition:

interface LoaderOptions {
  unit: string
  width: number
  precision: number
  outUnit: string
}

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