# rpx-transform-loader

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

Latest version **0.1.0** (published 2021-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install rpx-transform-loader
pnpm add rpx-transform-loader
yarn add rpx-transform-loader
bun add rpx-transform-loader
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-09-10 |
| First published | 2021-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wuliu |
| Maintainers | wjchumble |
| Keywords | vue, rpx, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/rpx-transform-loader
- Repository: https://github.com/WJCHumble/rpx-transform-loader
- Homepage: https://github.com/WJCHumble/rpx-transform-loader#readme
- Issues: https://github.com/WJCHumble/rpx-transform-loader/issues
- npm.io page: https://npm.io/package/rpx-transform-loader

## Dependencies (2)

- [qs](https://npm.io/package/qs.md) ^6.10.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-09-10

## README

## 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`:

```javascript
// 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:

```javascript
// 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:

```javascript
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      |

---
_Source: https://npm.io/package/rpx-transform-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._