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