antd icon本地（离线）部署过程

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的地址了。

而在未添加上述操做以前，iconfont资源请求的是alicdn 地址。

参考文章：

create-react-app项目添加less配置

antd icon离线没法显示 和引入官方库后覆盖原样式问题