react项目中px转rem

第一步：安装 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sass

npm insatll lib-flexible sass-loader node-sass postcss-px2rem-exclude --save

如果一起下载报错的话可以分开下载

npm insatll postcss-px2rem-exclude --save

npm insatll lib-flexible -D

第二步：找到webpack.config.js

路径：node_modules>react-scripts>config>webpack.config.js

先引入postcss-px2rem-exclude,然后在postcss-loader的plugins中加入

const px2rem = require('postcss-px2rem-exclude');

修改一下

{loader: require.resolve('postcss-loader'),options: {ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),
//px2rem加在这里px2rem({remUnit:75,exclude: /node_modules/i})],},
},

第三步：在react入口文件引入lib-flexible

import "lib-flexible"

第四步：修改index.html 禁止缩放

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />

第五步：完成后重启才能生效。

npm start

react项目中px转rem相关推荐

Vue移动端项目中px转rem的两种方法
1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible// 或者npm i amfe-flexible 然后在main. ...
vue项目中px转rem方法（pc端）
首先安装这两个插件 npm install postcss-px2rem-excludenpm install postcss-px2remnpm install px2rem-loader 安装好了 ...
VUE项目中px转rem
借鉴了网上的方法,自己在这里整理下.借鉴链接→传送门一.安装 lib-flexible npm install lib-flexible --save 二.安装px2rem-loader npm i ...
在vue项目或者react项目中实现图形验证码功能
效果演示使用说明我对这个图形验证码做了一个组件的封装,如果你的项目是vue项目就粘贴vue章节的组件代码,是react项目就粘贴react章节的组件代码.组件的使用很简单,只需要传递一个prop, ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...

react项目中px转rem

react项目中px转rem相关推荐

最新文章

热门文章