Gathering detailed insights and metrics for rpx-loader
Gathering detailed insights and metrics for rpx-loader
Installations
npm install rpx-loaderDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.6.0
NPM Version
6.9.0
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
vlev1n
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
5 Commits
1 Branches
1 Contributors
Updated on Jul 26, 2019
Maintainers
1
Package Meta Information
Latest Version
1.0.1
Package Id
rpx-loader@1.0.1
Unpacked Size
5.72 kB
Size
2.87 kB
File Count
3
NPM Version
6.9.0
Node Version
12.6.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
rpx-loader
简介 | Introduction
强烈建议使用postcss-rpx-loader取代本loader，使用postcss插件将更加简单、高效
本loader可以让你在webpack项目中使用响应式长度单位rpx，用法同微信小程序
可以取代rem和flexible.js等解决方案
It is highly recommended to use postcss-rpx-loader instead. Using postcss plugins is a simpler and more effective way.
This webpack loader is an implement of WeChat rpx in webpack projects.
It may replace rem and flexible.js solution.
Please scroll down for English readme.
优点
照搬标注图
可以直接将UI标注图上的px值照搬到CSS（或SCSS等）中，loader会自动完成转换，无需手动换算为rem等单位
提高客户端性能
单位转换由webpack处理，无需在客户端引入任何JS库，从而提高性能
与组件库无冲突
不依赖<html data-dpr="">，引入第三方组件库后，不会导致其变大或变小
不覆盖原生单位
rpx是新增单位，不覆盖CSS原有单位如rem、em和px等，原有单位依然可以正常使用
VW本质
由于本质上是vw，所以能够解决真实1px、视网膜屏幕等问题
使用方法
首先确保安装了css-loader以及你所需的预处理器的loader
在项目根目录中，执行npm i rpx-loader -D
在webpack.config.js中, 将rpx-loader插入到css-loader之前
1module.exports = { 2 module: { 3 rules: [{ 4 test: /\.css$/, 5 use: [ 6 'style-loader', 7 'rpx-loader', // 将`rpx-loader`插入到`css-loader`之前 8 'css-loader' 9 ] 10 }, { 11 test: /\.scss$/, // 也可以用于预处理器 12 use: [ 13 'vue-style-loader', // 可以与其它loader连环 14 'rpx-loader', // 将`rpx-loader`插入到`css-loader`之前 15 'css-loader', 16 'sass-loader' 17 ] 18 }] 19 } 20}
在样式文件中，使用rpx作为单位：
1div { 2 /* 如果UI标注图上为50px，则只需要写50rpx */ 3 height: 50rpx; 4}
最终你会得到：
1div { 2 height: 6.67vw; 3}
在不同宽度的设备上，视觉效果是一致的
注意事项
为简化配置，本loader默认UI标注图的宽度为750px
如需修改，可以自行改源码（源码极其短小，把750改成你的UI标注图宽度即可）
或者直接用同款PostCSS插件吧！它可以设置UI标注图宽度（见文档开头）
Features
Copy UI mark to code
Enables you to directly copy the px value in marked UI to your CSS (or other preprocessors), and the loader will compile them responsively without manually converting px values to rem or other units.
Better performance
Webpack will handle the unit conversion, and you needn't import any JS libs in the client. In other words, a better performance.
No conflict with third-party UI libs
It doesn't depend on <html data-dpr="", therefore, you won't get oversized or shrinked third-party UI lib.
No overwriting exsiting units
Since rpx is a new unit, existing units like rem, em and px are not overwritten and work as what they originally does.
VW core
It performs well on retina screens, and it well resolves real 1px problem, since the essence of rpx is vw.
Usage
Ensure that you've installed css-loader and the loader of your preferred preprocessor.
Run npm i rpx-loader -D in the root directory of your project.
In webpack.config.js, you need to insert rpx-loader before css-loader
1module.exports = { 2 module: { 3 rules: [{ 4 test: /\.css$/, 5 use: [ 6 'style-loader', 7 'rpx-loader', // insert 'rpx-loader' before 'css-loader' 8 'css-loader' 9 ] 10 }, { 11 test: /\.scss$/, // also works in preprocessors 12 use: [ 13 'vue-style-loader', // can be chained with other loaders 14 'rpx-loader', // insert 'rpx-loader' before 'css-loader' 15 'css-loader', 16 'sass-loader' 17 ] 18 }] 19 } 20}
In your style sheet, you can write as below:
1div { 2 height: 50rpx; // If it is 50px in the marked UI, you just need to write 50rpx 3}
And you will get:
1div { 2 height: 6.67vw; 3}
In devices with different screen widths, you will get uniform visual effects.
P.S.
The loader takes your UI width as 750px for granted, thus to minimize the config.
If you do need to config this, you may modify the source code. Don't worry, the source code is extremely short and dead simple. Just change 750 to your preferred width.
Using PostCSS version is a better choice! Adjusting UI width in PostCSS plugin is available. (See the beginning of this doc)
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
Found 0/5 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Score
2.6
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More