详解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系列(44):设计模式之桥接模式详解
Mar 04 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php批量修改表结构实例
2017/05/24 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
python实现中文输出的两种方法
2015/05/09 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python实现udp传输图片功能
2020/03/20 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
法人授权委托书范本
2014/04/04 职场文书
交通事故调解协议书
2014/04/16 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2014年教育工作总结
2014/11/26 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
浅谈Python数学建模之固定费用问题
2021/06/23 Python
python实现双向链表原理
2022/05/25 Python