详解react内联样式使用webpack将px转rem

背景

在开发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
  }
}

源代码

源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ReactJs设置css样式的方法

    ReactJs设置css样式的方法

    前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧. React颠覆了html的传统思维,代码基本都写在<script  type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在set

  • 浅谈react 同构之样式直出

    浅谈react 同构之样式直出

    前言 上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作,这篇文章就讲解一下如何让样式像html一样直出. PS: 直出,我的理解就是输入url发起get请求访问服务端,直接得到完整响应结果,而不是同过ajax异步去获取. React 同构的关键要素 完善的 Compponent 属性及生命周期与客户端的 render 时机是 React 同构的关键. DOM 的一致性 在前后端渲染相同的 Compponent,

  • 详解react内联样式使用webpack将px转rem

    背景 在开发react项目时,很多时候我们把style写在css.less.scss里,经过像postcss这样的配置处理,但有没有这样一种需求呢,像有些样式我们直接写在xml标签上style里,然后也能进行处理,如px2rem能将px转rem,是否在style上写也能实现. 思路 我们在webpack,/.(js|jsx)?$/这样babel-loader之前(webpack从右往左)加一个loader把需要转变的px进行替换,不就好了,先找找有没有这样的loader,我找了下没找到,只能自己

  • 详解react的两种动态改变css样式的方法

    第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi

  • 详解React Angular Vue三大前端技术

    详解React Angular Vue三大前端技术

    一.[React] React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库.它由Facebook和一个由个人开发者和公司组成的社区来维护. React可以作为开发单页或移动应用的基础.然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子. 基本用法 下面是一个简单的React在HTML中使用JSX和JavaScript的例子. Greeter函数

  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    详解React项目的服务端渲染改造(koa2+webpack3.11)

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

  • 详解Typescript 内置的模块导入兼容方式

    一.前言 前端的模块化规范包括 commonJS.AMD.CMD 和 ES6.其中 AMD 和 CMD 可以说是过渡期的产物,目前较为常见的是commonJS 和 ES6.在 TS 中这两种模块化方案的混用,往往会出现一些意想不到的问题. 二.import * as 考虑到兼容性,我们一般会将代码编译为 es5 标准,于是 tsconfig.json 会有以下配置: { "compilerOptions": { "module": "commonjs&qu

  • 详解React 16 中的异常处理

    详解React 16 中的异常处理 异常处理 在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致

  • 详解React Fiber的工作原理

    详解React Fiber的工作原理

    啥是React Fiber? React Fiber,简单来说就是一个从React v16开始引入的新协调引擎,用来实现Virtual DOM的增量渲染. 说人话:就是一种能让React视图更新过程变得更加流畅顺滑的处理手法. 我们都知道:进程大,线程小.而Fiber(纤维)是一种比线程还要细粒度的处理机制.从这个单词也可以猜测:React Fiber会很"细".到底怎么个细法,我们接着往下看. 为什么会有React Fiber? 之前说了,React Fiber是为了让React的视

  • 详解React中key的作用

    详解React中key的作用

    要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =

  • 详解React setState数据更新机制

    为什么使用setState 在React 的开发过程中,难免会与组件的state打交道.使用过React 的都知道,想要修改state中的值,必须使用内部提供的setState 方法.为什么不能直接使用赋值的方式修改state的值呢?我们就分析一下,先看一个demo. class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } re

  • 详解React中的this指向

    打算记流水账一般细数一下 React 中的 this 指向问题,具体流程按事件三要素:起因,经过,结果.哈哈哈哈哈! 起因: 众所周知,React 的设计是响应式的,使用者无需操纵 DOM,操纵数据,页面就会渲染更新. 数据一变就更新,是更新所有的 DOM 吗?当然不是,哪些变了就重新渲染哪些.那就要对数据变化前后的 DOM 进行比较.直接对比真实 DOM 吗?这样性能会很低,React 比较的是虚拟 DOM,虚拟 DOM 也是对象,只不过相较真实 DOM而言,少了很多属性,更"轻".

随机推荐