react配置px转换rem的方法
安装相关的依赖
npm i lib-flexible --save
npm i postcss-px2rem --save
主要用来暴露项目配置
npm run eject
!如果运行npm run eject报错,出错的原因应该是仓库里面代码没有提交,如下提交一下
git add .
git commit -m '自定义名'
npm run eject
然后打开项目中 config->webpack.config.js 进行配置
// 在配置文件中添加如下两行代码
// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62const px2rem = require('postcss-px2rem');
px2rem({ remUnit: 75 })
按照设计图大小设置 如:108=1080px/10
引入 lib-flexible:在入口文件index.js中引入lib-flexible文件
import 'lib-flexible'
在 public->index.html 文件里把下面的这段代码注释掉
配置完成之后 重启项目
到此这篇关于react配置px转换rem的方法的文章就介绍到这了,更多相关react配置px转换rem内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用VScode 插件debugger for chrome 调试react源码的方法
这篇文章主要介绍了使用VScode 插件debugger for chrome 调试react源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09一文详解ReactNative状态管理redux-toolkit使用
这篇文章主要为大家介绍了ReactNative状态管理redux-toolkit使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03JavaScript的React Web库的理念剖析及基础上手指南
这篇文章主要介绍了JavaScript的React Web库的理念剖析及基础上手指南,React Web的目的即是把本地的React Native应用程序项目变为Web应用程序,需要的朋友可以参考下2016-05-05完美解决react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
这篇文章主要介绍了react-codemirror2编辑器需点击一下或者延时才显示数据的问题,解决方法也很简单,需要手动引入自动刷新的插件,配置一下参数就可以了,本文给大家介绍的非常详细,需要的朋友可以参考下2023-08-08ReactNative点击事件.bind(this)操作分析
这篇文章主要为大家介绍了ReactNative点击事件.bind(this)操作分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论