React引入antd-mobile+postcss搭建移动端
安装antd-mobile
全局引入
npm install antd-mobile --save
在App.js
引入css
import 'antd-mobile/dist/antd-mobile.css';
在jsx
使用antd组件
import React from 'react'; import { Button } from 'antd-mobile'; const index = () => { return ( <div> <Button type="primary">primary</Button> </div> ); } export default index;
按需引入
npm install babel-plugin-import -s
安装插件,覆盖webpack
配置
customize-cra配置api文档
npm install react-app-rewired customize-cra -s
package.json
进行更改命令方式
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },
在根目录新建config-overrides.js
const { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }), );
在App.js
删除之前引入的css
校验是否按需引入
引入postcss px转rem
npm install lib-flexible postcss-px2rem-exclude --save
index.js
导入
import 'lib-flexible'
修改config-overrides.js
文件
const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require('customize-cra'); const path = require("path"); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }), addPostcssPlugins( [require("postcss-px2rem-exclude") ( { remUnit: 75, //设计图大小 remPrecision: 2, //只转换到两位小数 exclude: /node_modules/i //插件不需要转rem } ) ] ), addWebpackAlias({ "@": path.resolve(__dirname, "src") }) );
如果你需要使用less
/
自定义主题
npm install less less-loader -s
如果项目启动报错,是因为less-loader
版本过高,需要卸载,安装低版本
npm install less-loader@5.0.0 -s
坑! 需要注意顺序
const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra'); const path = require("path"); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: true, //默认为'css' }), addLessLoader({ javascriptEnabled: true, modifyVars: { "@brand-primary": "#1DA57A" }, //自定义主题 }), addPostcssPlugins( [require("postcss-px2rem-exclude") ( { remUnit: 75, //设计图大小 remPrecision: 2, //只转换到两位小数 exclude: /node_modules/i //插件不需要转rem } ) ] ), addWebpackAlias({ "@": path.resolve(__dirname, "src") }) );
补充:解决react项目引入antd-mobile导致postcss配置px转rem失效问题
今天使用了一下antd-mobile发现我之前配置的postcss失效了,防止下次踩坑记录一下解决方案
解决方案:在config-overrides.js文件里重写postcss,加入如下代码
npm下载以下模块
npm i react-app-rewire-postcss postcss-px2rem-exclude -S
const { override, fixBabelImports, addWebpackAlias, addDecoratorsLegacy, } = require("customize-cra"); const path = require("path"); const rewirePostcss = require("react-app-rewire-postcss"); module.exports = override( // 配置按需加载 fixBabelImports("import", { libraryName: "antd-mobile", style: "css", }), // 配置文件别名 addWebpackAlias({ "@": path.resolve(__dirname, "src"), "@scss": path.resolve(__dirname, "src/assets/scss"), "@images": path.resolve(__dirname, "src/assets/images"), "@views": path.resolve(__dirname, "src/views"), "@network": path.resolve(__dirname, "src/network"), "@store": path.resolve(__dirname, "src/store"), "@components": path.resolve(__dirname, "src/components"), }), addDecoratorsLegacy(), (config, env) => { // 重写postcss rewirePostcss(config, { plugins: () => [ require("postcss-flexbugs-fixes"), require("postcss-preset-env")({ autoprefixer: { flexbox: "no-2009", }, stage: 3, }), require("postcss-px2rem-exclude")({ // 设计稿宽度/10 remUnit: 1080 / 10, exclude: /node-modules/i, }), ], }); return config; } );
以上就是React引入antd-mobile+postcss搭建移动端的详细内容,更多关于React搭建移动端的资料请关注猪先飞其它相关文章!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。...2016-06-12
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
C# Xamarin利用ZXing.Net.Mobile进行扫码的方法
这篇文章主要介绍了C# Xamarin利用ZXing.Net.Mobile进行扫码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25- 这篇文章主要为大家详细介绍了jquery mobile实现可折叠的导航按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-03-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13