详解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扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
js下载文件并修改文件名
May 08 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
详解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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
Open and Print a Word Document
2007/06/15 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python实现不规则图形填充的思路
2020/02/02 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
python 实现图片批量压缩的示例
2020/12/18 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
元旦寄语大全
2014/04/10 职场文书
保护环境倡议书500字
2014/05/19 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
个人总结怎么写
2015/02/26 职场文书
史上最牛辞职信
2015/05/13 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
应收账款管理制度
2015/08/06 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL