详解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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JsRender实用入门教程
Oct 31 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
axios基本入门用法教程
2017/03/25 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python多线程原理与用法详解
2018/08/20 Python
python如何制作缩略图
2019/04/30 Python
django 信号调度机制详解
2019/07/19 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python流程控制常用工具详解
2020/02/24 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
中文系师范生自荐信
2013/10/01 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
机械操作工岗位职责
2014/08/08 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
保安2014年终工作总结
2014/12/06 职场文书
导游词之镇江焦山
2019/11/21 职场文书