文章目录

一、使用Antd-mobile（1）下载antd-mobile（2）使用 二、修改配置颜色（1）安装包（2）修改package.json（3）根目录新建config-overrides.js法一：直接在modifyVars修改法二：根目录下新建antd-theme.json文件 注意：

一、使用Antd-mobile

（1）下载antd-mobile

$ npm install antd-mobile --save

（2）使用

找到react 项目下的public文件夹下的index.html文件

修改meta 的viewport为以下：

<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

在head标签中添加两个script标签，属性为下：

<script src="/g/component/fastclick/1.0.6/fastclick.js"></script><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function () {FastClick.attach(document.body);}, false);}if (!window.Promise) {document.writeln('<script src="/g/component/es6-promise/3.2.2/es6-promise.min.js"' +'>' + '<' + '/' + 'script>');}</script>

在APP.tsx中引入css

import React from 'react'import Router from './router'import 'antd-mobile/dist/antd-mobile.css'function App() {return (<div className="App"><Router></Router></div>)}export default App

然后在页面中引入所需要的antd-mobile组件即可使用

二、修改配置颜色

（1）安装包

$ npm install react-app-rewired customize-cra --save-dev$ npm install babel-plugin-import --save-dev

（2）修改package.json

-为删除

+为添加

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

（3）根目录新建config-overrides.js

做如下配置

法一：直接在modifyVars修改

const {override, fixBabelImports, addLessLoader } = require('customize-cra')module.exports = override(fixBabelImports('import', {libraryName: 'antd-mobile',libraryDirectory: 'es',style: true,}),addLessLoader({javascriptEnabled: true,modifyVars: {'@brand-primary': '#ccc',},}))

法二：根目录下新建antd-theme.json文件

输入要修改的颜色

{"@brand-primary": "darkcyan"}

修改引入

const {override, fixBabelImports, addLessLoader } = require('customize-cra')const theme = require('./antd-theme')module.exports = override(fixBabelImports('import', {libraryName: 'antd-mobile',libraryDirectory: 'es',style: true,}),addLessLoader({javascriptEnabled: true,modifyVars: theme}))

注意：

配置好了需要重启项目如果报错，需要确定下的包是否ok，确定依赖版本

"devDependencies": {"babel-plugin-import": "^1.13.0","css-loader": "^3.2.1","less": "^3.10.3","less-loader": "^5.0.0","style-loader": "^1.0.1"}