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離線沒法顯示 和引入官方庫後覆蓋原樣式問題