o-前言
引用ant-design在github上的本地部署 Iconfont说明：
Ant Design 默认的 iconfont 文件托管在 iconfont.cn 并默认使用平台提供的 alicdn 地址，公网可访问使用。 由于 alicdn 对部分域名有访问限制，或者需要内网环境使用，您可以参照这个例子将 iconfont 文件部署到本地。
下载上述local-iconfont的demo后，运行代码可以看到，其中的icon加载的确实是本地资源。 但是，因为之前的项目是用create-react-app创建的，参照demo中关于 webpack 配置暂时没整明白，想找另外一种方法来加载本地的这个Iconfont。 最后，根据参考文章中的方法，测试成功了。
1-使用create-react-app创建一个demo并正常使用antd
根据该文，在 create-react-app 中使用，确保正确使用antd。接下去是增加less配置。
2-create-react-app项目添加less配置
因为后面要用less把 iconfont 地址改到本地，而“使用create-react-app 创建的项目默认不支持less”，所以需要先配置less。
根据该文，create-react-app项目添加less配置，添加less配置。
暴露配置文件
create-react-app生成的项目文，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可：
npm run eject
在执行完eject后，可以发现文件夹目录多了两个文件夹，config和scripts。webpack的配置文件可以在config文件夹里找到。
安装less-loader 和 less
npm install less-loader less --save-dev
修改webpack配置
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件
改动1：
/\.css$/改为/\.(css|less)$/, 修改后如下：
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
改动2：
test: /\.css$/改为/\.(css|less)$/test: /\.css$/的 use 数组配置增加less-loader
修改后如下：
{
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
},
],
},
3-引入官方图标库iconfont
到该链接下载iconfont文件。
解压后删除含有demo字段的例子。将余下的6个文件名含有iconfont字段的文件复制到node_modules\antd\dist下新建的iconfont文件夹下。
4-添加.less文件
在项目的css入口文件对应的文件夹下创建.less文件。在less文件中添加以下代码。
@import "~antd/dist/antd.less";
@icon-url: '~antd/dist/iconfont/iconfont';// 把 iconfont 地址改到本地
另外：!!! 还需要将原先在主css文件中添加的@import '~antd/dist/antd.css';语句移除。
最后别忘记在项目的js入口文件中引用.less文件。
5-结果
添加上述操作后，重新运行，可以看到其中的iconfont资源请求已经改成加载localhost的地址了。
参考文章：
