详解react内联样式使用webpack将px转rem


Posted in Javascript onSeptember 13, 2018

背景

在开发react项目时,很多时候我们把style写在css、less、scss里,经过像postcss这样的配置处理,但有没有这样一种需求呢,像有些样式我们直接写在xml标签上style里,然后也能进行处理,如px2rem能将px转rem,是否在style上写也能实现。

思路

我们在webpack,/.(js|jsx)?$/这样babel-loader之前(webpack从右往左)加一个loader把需要转变的px进行替换,不就好了,先找找有没有这样的loader,我找了下没找到,只能自己写一个了

代码

const loaderUtils = require('loader-utils');

// 默认参数
const defaultopts = {
  remUnit: 100, // rem unit value (default: 100)
  remFixed: 2, // rem value precision (default: 2)
};
// 获取webpack配置好的参数
const opts = loaderUtils.getOptions(this);
// 将参数组合
const config = Object.assign({}, defaultopts, opts);
const ZPXRegExp = /\b(\d+(\.\d+)?)SUPX\b/;

module.exports = function (source) {
  let pxGlobalRegExp = new RegExp(ZPXRegExp.source, 'g');
  if (this.cacheable) {
    this.cacheable();
  }
  // 先test下有没有符合的如果有再进行替换
  if (pxGlobalRegExp.test(source)) {
    return source.replace(pxGlobalRegExp, ($0, $1) => {
      let val = $1 / config.remUnit;
      // 精确到几位
      val = parseFloat(val.toFixed(config.remFixed));
      return val === 0 ? val : val + 'rem';
    });
  } else {
    return source;
  }
};

用法

{
  loader: path.join(rootPath, 'loaders/jsxPx2RemLoader'),
  options: {
    remUnit: 100,
    remFixed: 3
  }
}

源代码

源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
详解webpack 热更新优化
Sep 13 #Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 #Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 #Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 #Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 #Javascript
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP多文件上传类实例
2015/03/07 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
VUE重点问题总结
2018/03/19 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
python函数的5种参数详解
2017/02/24 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
浅析python的优势和不足之处
2018/11/20 Python
python画双y轴图像的示例代码
2019/07/07 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python集合常见运算案例解析
2019/10/17 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
五年级科学教学反思
2014/02/05 职场文书
住宅质量保证书
2014/04/29 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
高中英语教学反思范文
2016/03/02 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers