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 |