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的地址。
相关推荐
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18
81463166 2020-07-17