详解react内联样式使用webpack将px转rem
更新时间：2018年09月13日 14:07:07 作者：sunshinng
这篇文章主要介绍了详解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
}
}
源代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了react项目实践之webpack-dev-serve,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
详解使用create-react-app添加css modules、sasss和antd
这篇文章主要介绍了详解使用create-react-app添加css modules、sasss和antd，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了如何基于React封装一个层次模糊效果的容器组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
在构建复杂的React应用时,组件之间的通信是至关重要的,从简单的父子组件通信到跨组件状态同步,不同组件之间的通信方式多种多样,下面我们认识react组件通信的几种方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了React+Spring实现跨域问题的完美解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
本文主要介绍了深入理解React调度(Scheduler)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要为大家介绍了react redux及redux持久化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧2021-06-06
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合2022-10-10
react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom
这篇文章主要介绍了react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
最新评论