详解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绘制圆形和矩形的方法
Aug 05 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
VUE 3D轮播图封装实现方法
Jul 03 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue中@change兼容问题详解
Oct 25 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
js form action动态修改方法
2008/11/04 Javascript
jquery 常用操作方法
2010/01/28 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python数据可视化之画图
2019/01/15 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python 文件数据读写的具体实现
2020/01/24 Python
详解python中的lambda与sorted函数
2020/09/04 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
世界名著读书笔记
2015/06/25 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python