一:创建一个react项目
npx create-react-app project
二:暴露所有内建的配置(注:我这里用的是yarn)
yarn eject
注:如果yarn eject 报错的解决的方法
git add .
git commit -m 'aa'
yarn eject
三:使用babel-plugin-import实现Antd按需加载,并修改package.json
yarn add babel-plugin-import --save-dev
package.json :
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
四:安装less-loader 和 less
yarn add less-loader less --save-dev
五:修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
1.在oneOf中添加
oneOf: [
...
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
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') // compiles Less to CSS
}
],
},
]
2.查找exclude
原本的 exclude: [/\.js$/, /\.html$/, /\.json$/],
修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
六:在App.js中运用
/*
* @Author: Twinkle
* @Date: 2018-11-07 11:34:48
* @Last Modified by: Twinkle
* @Last Modified time: 2018-11-07 11:34:48
*/
import React, { Component } from 'react';
import './App.less';
import { Button } from 'antd';
class App extends Component {
render() {
return (
<div>
<p>按需加载antd</p>
<Button>点击</Button>
</div>
);
}
}
export default App;
创建App.less
/*
* @Author: Twinkle
* @Date: 2018-11-07 11:35:57
* @Last Modified by: Twinkle
* @Last Modified time: 2018-11-07 11:35:57
*/
div{
color: aquamarine;
}
7: yarn start
完成