详解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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
javascript中"/"运算符常见错误
Oct 13 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP 判断变量类型实现代码
2009/10/23 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
Python基本语法经典教程
2016/03/11 Python
Python socket实现简单聊天室
2018/04/01 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python socket 聊天室实例代码详解
2019/11/14 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
python3判断IP地址的方法
2021/03/04 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
应聘自荐信
2013/12/14 职场文书
双创工作实施方案
2014/03/26 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
Win11软件图标固定到任务栏
2022/04/19 数码科技