经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React引入antd-mobile+postcss搭建移动端
来源:jb51  时间:2021/6/21 9:52:11  对本文有异议

安装antd-mobile

全局引入

  1. npm install antd-mobile --save

App.js引入css

  1. import 'antd-mobile/dist/antd-mobile.css';

jsx使用antd组件

  1. import React from 'react';
  2. import { Button } from 'antd-mobile';
  3. const index = () => {
  4. return (
  5. <div>
  6. <Button type="primary">primary</Button>
  7. </div>
  8. );
  9. }
  10.  
  11. export default index;

按需引入

  1. npm install babel-plugin-import -s

安装插件,覆盖webpack配置

customize-cra配置api文档

  1. npm install react-app-rewired customize-cra -s

package.json进行更改命令方式

  1. "scripts": {
  2. "start": "react-app-rewired start",
  3. "build": "react-app-rewired build",
  4. "test": "react-app-rewired test",
  5. "eject": "react-app-rewired eject"
  6. },

在根目录新建config-overrides.js

  1. const { override, fixBabelImports } = require('customize-cra');
  2. module.exports = override(
  3. fixBabelImports('import', {
  4. libraryName: 'antd-mobile',
  5. style: 'css',
  6. }),
  7. );

App.js删除之前引入的css
校验是否按需引入

在这里插入图片描述

引入postcss px转rem

  1. npm install lib-flexible postcss-px2rem-exclude --save

index.js导入

  1. import 'lib-flexible'

修改config-overrides.js文件

  1. const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require('customize-cra');
  2. const path = require("path");
  3. module.exports = override(
  4. fixBabelImports('import', {
  5. libraryName: 'antd-mobile',
  6. style: 'css',
  7. }),
  8. addPostcssPlugins(
  9. [require("postcss-px2rem-exclude")
  10. (
  11. {
  12. remUnit: 75, //设计图大小
  13. remPrecision: 2, //只转换到两位小数
  14. exclude: /node_modules/i //插件不需要转rem
  15. }
  16. )
  17. ]
  18. ),
  19. addWebpackAlias({
  20. "@": path.resolve(__dirname, "src")
  21. })
  22. );

如果你需要使用less
/
自定义主题

  1. npm install less less-loader -s

如果项目启动报错,是因为less-loader版本过高,需要卸载,安装低版本

  1. npm install less-loader@5.0.0 -s

坑! 需要注意顺序

  1. const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra');
  2. const path = require("path");
  3. module.exports = override(
  4. fixBabelImports('import', {
  5. libraryName: 'antd-mobile',
  6. style: true, //默认为'css'
  7. }),
  8.  
  9. addLessLoader({
  10. javascriptEnabled: true,
  11. modifyVars: { "@brand-primary": "#1DA57A" }, //自定义主题
  12. }),
  13.  
  14. addPostcssPlugins(
  15. [require("postcss-px2rem-exclude")
  16. (
  17. {
  18. remUnit: 75, //设计图大小
  19. remPrecision: 2, //只转换到两位小数
  20. exclude: /node_modules/i //插件不需要转rem
  21. }
  22. )
  23. ]
  24. ),
  25.  
  26. addWebpackAlias({
  27. "@": path.resolve(__dirname, "src")
  28. })
  29. );

补充:解决react项目引入antd-mobile导致postcss配置px转rem失效问题

今天使用了一下antd-mobile发现我之前配置的postcss失效了,防止下次踩坑记录一下解决方案
解决方案:在config-overrides.js文件里重写postcss,加入如下代码
npm下载以下模块

  1. npm i react-app-rewire-postcss postcss-px2rem-exclude -S
  1. const {
  2. override,
  3. fixBabelImports,
  4. addWebpackAlias,
  5. addDecoratorsLegacy,
  6. } = require("customize-cra");
  7. const path = require("path");
  8. const rewirePostcss = require("react-app-rewire-postcss");
  9. module.exports = override(
  10. // 配置按需加载
  11. fixBabelImports("import", {
  12. libraryName: "antd-mobile",
  13. style: "css",
  14. }),
  15. // 配置文件别名
  16. addWebpackAlias({
  17. "@": path.resolve(__dirname, "src"),
  18. "@scss": path.resolve(__dirname, "src/assets/scss"),
  19. "@images": path.resolve(__dirname, "src/assets/images"),
  20. "@views": path.resolve(__dirname, "src/views"),
  21. "@network": path.resolve(__dirname, "src/network"),
  22. "@store": path.resolve(__dirname, "src/store"),
  23. "@components": path.resolve(__dirname, "src/components"),
  24. }),
  25. addDecoratorsLegacy(),
  26. (config, env) => {
  27. // 重写postcss
  28. rewirePostcss(config, {
  29. plugins: () => [
  30. require("postcss-flexbugs-fixes"),
  31. require("postcss-preset-env")({
  32. autoprefixer: {
  33. flexbox: "no-2009",
  34. },
  35. stage: 3,
  36. }),
  37. require("postcss-px2rem-exclude")({
  38. // 设计稿宽度/10
  39. remUnit: 1080 / 10,
  40. exclude: /node-modules/i,
  41. }),
  42. ],
  43. });
  44. return config;
  45. }
  46. );

以上就是React引入antd-mobile+postcss搭建移动端的详细内容,更多关于React搭建移动端的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号