Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置

本文主要是介绍Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一：创建一个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/2677ident: '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

完成

这篇关于Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---