详解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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery知识点整理
Jan 30 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
jQuery操作css样式
May 15 jQuery
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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代码优化及php相关问题总结
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP中Array相关函数简介
2016/07/03 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
浅析python继承与多重继承
2018/09/13 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python实现名片管理系统
2020/02/14 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
节能环保口号
2014/06/12 职场文书
财务工作检讨书
2014/10/29 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers