前言

練習(xí)使用react做移動端h5的時候，選擇使用antd-mobileUI庫。但是在使用的時候，遇到了一些坑。查詢了很多別人遇到類似問題的解決方法?，F(xiàn)在記錄一下自己的解決方法。

1、創(chuàng)建react項目以及準(zhǔn)備工作

1.1、創(chuàng)建項目

npx create-react-app [你的項目名稱]

1.2、下載需要的UI組件庫

yarn add antd-mobile

1.3、整理項目目錄

這里放一個本人整理好的項目目錄，當(dāng)然可能有些目錄是不需要的，可以不要，暫時先放在這里。

image.png

2、antd-mobile按需引入配置

這里是按需加載的操作，可以按照官網(wǎng)上的提示一步一步的做。

2.1、 引入 react-app-rewired

由于新的 react-app-rewired@2.x 版本的關(guān)系，你需要還需要安裝 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、根目錄創(chuàng)建一個 config-overrides.js 用于修改默認(rèn)配置

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

2.4、使用 babel-plugin-import

babel-plugin-import 是一個用于按需加載組件代碼和樣式的 babel 插件（原理），現(xiàn)在我們嘗試安裝它并修改 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 作為開發(fā)語言，并定義了一系列全局/組件的樣式變量，你可以根據(jù)需求進(jìn)行相應(yīng)調(diào)整。
使用 modifyVars 的方式來覆蓋變量。

這個過程中，出現(xiàn)了很多錯誤，踩了很多坑，才解決問題的。這也是寫這篇博客的原因所在。由于是解決問題后才寫的這篇博客，又不想浪費時間重現(xiàn)過程中遇到的錯誤。所以，這里只寫正確解決問題的所有過程。

3.1、下載依賴

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

注意：下面配置webpack的方式不是唯一，可以在根目錄下創(chuàng)建webpack配置文件覆蓋默認(rèn)的配置。

3.2、生成config的所有文件

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

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

添加lessRegex、lessModuleRegex

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

復(fù)制sass-loader的配置替換為less-loader的配置復(fù)制在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下創(chuàng)建theme文件下以及antd-theme.json文件用于創(chuàng)建主題樣式

image.png

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

3.4、配置覆蓋默認(rèn)主題

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

原創(chuàng)文章：轉(zhuǎn)載請聯(lián)系我。未經(jīng)允許，禁止轉(zhuǎn)載。

如果能夠幫助到你，是小編最大的榮幸

當(dāng)然 有 不好的地方 請大家?guī)兔χ赋?學(xué)習(xí)永無止境

小編一直認(rèn)為 人外有人 天外有天 一起學(xué)習(xí) 共同進(jìn)步

讓我們共同加油吧?。?！