react使用antd-mobile的按需加载和自定义主题

前言

练习使用react做移动端h5的时候，选择使用antd-mobileUI库。但是在使用的时候，遇到了一些坑。查询了很多别人遇到类似问题的解决方法。现在记录一下自己的解决方法。

1、创建react项目以及准备工作

1.1、创建项目

npx create-react-app [你的项目名称]

1.2、下载需要的UI组件库

yarn add antd-mobile

1.3、整理项目目录

这里放一个本人整理好的项目目录，当然可能有些目录是不需要的，可以不要，暂时先放在这里。

image.png

2、antd-mobile按需引入配置

这里是按需加载的操作，可以按照官网上的提示一步一步的做。

2.1、 引入 react-app-rewired

由于新的 [email protected] 版本的关系，你需要还需要安装 customize-cra。

yarn add react-app-rewired customize-cra --save-dev

2.2、 修改 package.json 里的启动配置

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }

2.3、根目录创建一个 config-overrides.js 用于修改默认配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

2.4、使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件

安装

 yarn add babel-plugin-import --save-dev

修改config-overrides.js 文件

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
);

2.5、 更改使用方式

import { Button } from 'antd-mobile';

3、 自定义主题

image.png

antd-mobile 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
使用 modifyVars 的方式来覆盖变量。

这个过程中，出现了很多错误，踩了很多坑，才解决问题的。这也是写这篇博客的原因所在。由于是解决问题后才写的这篇博客，又不想浪费时间重现过程中遇到的错误。所以，这里只写正确解决问题的所有过程。

3.1、下载依赖

yarn add babel-plugin-import less less-loader style-loader css-loader --save-dev

注意：下面配置webpack的方式不是唯一，可以在根目录下创建webpack配置文件覆盖默认的配置。

3.2、生成config的所有文件

yarn eject  // 生成 config 和scripts文件夹

3.3、配置webpack文件，路径在config/webpack.config.js

添加lessRegex、lessModuleRegex

//添加的常量代码
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

复制sass-loader的配置替换为less-loader的配置复制在oneOf下

oneOf:[
        xxx,
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment
                },
                'less-loader'
              ),
              sideEffects: true
            },            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader'
              )
            },
      ]

3.3、src下创建theme文件下以及antd-theme.json文件用于创建主题样式

image.png

{
    "@brand-primary": "#ff5722",
    "@brand-primary-tap": "#ffccbc",
    "@color-text-base-inverse": "#3f51b5"
}

3.4、配置覆盖默认主题

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
const theme = require("./src/theme/antd-theme.json");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: theme,
    },
  })
);

到此，就配置完了，那么让我们来看下效果吧！

4、效果

image.png

原创文章：转载请联系我。未经允许，禁止转载。

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！