当前位置: 首页 > Web前端 > HTML5

(手机端适配px转rem)react配置rem插件lib-flexible和postcss-px2rem-exclude

时间:2023-04-05 17:06:27 HTML5

1.安装插件yarnaddlib-flexiblepostcss-px2rem-exclude//这个插件也要下载,否则启动项目会报错yarnaddreact-app-rewire-postcss2,修改config-overrides.js(如果不是New,在项目根目录)重写config-overrides.js文件中的postcss,添加如下代码,此文件合并antd-mobile配置,如果使用antd-mobile按需导入,则粘贴直接就行了,antd-mobile按需导入参考官网https://mobile.ant.design/doc...const{override,fixBabelImports,addWebpackAlias,addDecoratorsLegacy,}=require("customize-cra");constpath=require("path");constrewirePostcss=require("react-app-rewire-postcss");constpx2rem=require("postcss-px2rem-exclude");module.exports=override(fixBabelImports("导入",{libraryName:"antd-mobile",style:"css",}),addWebpackAlias({"@":path.resolve(__dirname,"src"),}),addDecoratorsLegacy(),(config,env)=>{//重写postcssrewirePostcss(config,{plugins:()=>[require("postcss-flexbugs-fixes"),require("postcss-preset-env")({autoprefixer:{flexbox:"no-2009",},stage:3,}),//Key:setpx2rempx2rem({remUnit:37.5,//这里初始写的是75,但是antd的module的style变小了,查询后发现设置为37.5,然后试了一下排除:/node-modules/i,}),],});returnconfig;});3.入口文件在index.js中引入lib-flexibleimport"lib-flexible"4.最后一步修改index.html