详解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实现的动态文字变换
Jul 28 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
javascript中caller和callee详解
Aug 10 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
什么是SOLID
Mar 24 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投票系统防刷票判断流程分析
2012/02/04 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
express启用https使用小记
2019/05/21 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
Python实现子类调用父类的方法
2014/11/10 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python可以用哪些数据库
2020/06/22 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
大学生自我鉴定
2013/12/08 职场文书
小学教师管理制度
2014/01/18 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
护士节活动总结
2014/08/29 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
理解python中装饰器的作用
2021/07/21 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js