ant design iconfont 離線

ant design 的iconfont 字體是調用的阿里的CDN地址，對於一些內網的應用，或者被屏蔽的站點，下載的字體地址就不生效了。官網提供了一種解決方案，替換less變量 @icon-url， 詳見： https://github.com/Joannamo/a...

除了這種方案，現提供一種修改經過webpack的配置的方式來修改。

step 1: 下載相應的字體到本地

下載地址：https://ant.design/docs/spec/...

能夠把下載的文件放入到public目錄中。

step 2: webpack 配置

{
        test: /\.less$/,
        use: [
          require.resolve('style-loader'),
          require.resolve('css-loader'),
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
              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'),
            options: {
                modifyVars: {
                    '@font-size-base': '13px',
                    '@text-color': 'fade(#000, 75%)',
                    "@icon-url": '"/iconfont/iconfont"'
                }
            },
          },
        ],
      }

這種方式跟官方的提供的方式類似，只是這裏是採用webpack配置的方式，我的認爲webpack配置的方式更靈活。

除了上面的方式，更粗暴的方式是直接去ant design裏面修改文件中的 @icon-url的地址。