react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
类别:编程学习 浏览量:1441
时间:2021-10-26 11:40:49 react和antd项目教程
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 ( <li> <Button type="primary">primary</Button> </li> ); } 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
校验是否按需引入
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的基本知识(React中refs的一些常见用法汇总)
- reacthooks用法(详解React Hooks是如何工作的)
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- react执行流程(React开启代理的2种实用方式)
- react中state的作用是什么(React中useEffect 与 useLayoutEffect的区别)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- reactnative混合开发教程(教你使用vscode 搭建react-native开发环境)
- react路由原理解析(React配置子路由的实现)
- react native常用组件(react native环境安装流程)
- react代码展示(教你如何从 html 实现一个 react)
- react 组件如何发布(React如何创建组件)
- react常见问题(React编程中需要注意的两个错误)
- react 分页列表优化(使用react-beautiful-dnd实现列表间拖拽踩坑)
- react性能优化是哪个周期(React 并发功能体验前端的并发模式)
- react的动画实现(React实现动效弹窗组件)
- 新一小兰领衔 盘点动漫中的那些 远距离恋爱情侣(盘点动漫中的那些)
- 大事件 合肥四中火了(大事件合肥四中火了)
- 翼龙贷组织出借人调研 感受鄱阳 借 来的致富路(翼龙贷组织出借人调研)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9