1:第一种方法
按需引入办法
1:安装antd-mobile
npm install antd-mobile --save
2:引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系,你需要还需要安装 customize-cra。
npm install react-app-rewired customize-cra --save-dev
3:修改package,json文件的“script”内容为
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
4:安装babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
npm install babel-plugin-import --save-dev
5:在项目根目录创建一个 config-overrides.js 用于修改默认配置。
const { override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
修改 app.js为以下代码
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd-mobile';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Button type="primary" disabled>primary disabled</Button>
</header>
</div>
);
}
export default App;
以下为定制主题
1:你的项目里需要包含如下依赖 babel-plugin-import less less-loader style-loader css-loader 。
npm install --save-dev babel-plugin-import less less-loader style-loader css-loader
2:这里的主体定制的放在了 package.json
"theme": {
"hd": "2px",
"brand-primary": "red",
"color-text-base": "#333"
},
"scripts": {
"start": "set PORT= 8885 && react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
3:在刚才创建的config-overrides.js中 修改为以下内容
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./package.json').theme
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: theme
}
}),
);
以下为手机适配
1:
npm install postcss-px2rem-exclude --save
2:在config-overrides.js中 修改为以下内容
const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');
const theme = require('./package.json').theme;
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: true,
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: theme
}
}),
addPostcssPlugins(
[require("postcss-px2rem-exclude")({
remUnit: 16, //这里是比列 1rem = 16px
propList: ['*'],
exclude: ''
})]
),
);
2:第二种方法
按需引入
0:npm install antd-mobile --save
1:npm i react-app-rewired@2.0.2-next.0
2.更改package,json文件的“script”内容为
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
3:npm install babel-plugin-import --save-dev
4:在项目根目录创建一个 config-overrides.js 用于修改默认配置。
5:
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config,env) {
config = injectBabelPlugin(['import',{ libraryName: 'antd-mobile',style:'css'}],config)
return config
}
定制主题以及手机适配
这里的less-loader一定要在5.0版本一下 推荐使用 4.1.0
1:npm install --save-dev babel-plugin-import less style-loader css-loader
2:npm install less-loader@4.1.0
3:项目\public\index.html的header 头部中引用
引入: 也就是以下的js
!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]);
flex(100, 1);
4:这里的主体定制的放在了 package.json
"theme": {
"hd": "2px",
"brand-primary": "red",
"color-text-base": "#333"
},
"scripts": {
"start": "set PORT= 8885 && react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
5:
npm install react-app-rewire-postcss --save-dev
npm i postcss-pxtorem -D
5:修改config-overrides.js 为以下代码
const { injectBabelPlugin, getLoader } = require('react-app-rewired');
const rewirePostcss = require('react-app-rewire-postcss');
const pxtorem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');
const theme = require('./package.json').theme;
const fileLoaderMatcher = function (rule) {
return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
}
module.exports = function override(config, env) {
// do stuff with the webpack config...
config = injectBabelPlugin(['import', {
libraryName: 'antd-mobile',
// style: 'css',
style: true, // use less for customized theme
}], config);
// //less
config.module.rules[2].oneOf.unshift(
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
modifyVars: theme
}
},
]
}
);
config = rewirePostcss(config,{
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
pxtorem({
rootValue: 50, //以100px为准,不同方案修改这里
propWhiteList: [],
})
],
});
// file-loader exclude
let l = getLoader(config.module.rules, fileLoaderMatcher);
l.exclude.push(/\.scss$/);
l.exclude.push(/\.less$/);
return config;
};
5:定制主题以及手机适配 按需引入等功能完毕