ant design iconfont 離線

小渝人兒發表於2018-08-01

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

相關文章