antd icon本地(离线)部署过程

2018-02-09 12:38:59来源:https://juejin.im/post/5a7a9c17f265da4e761fb397作者:稀土掘金人点击

分享

引用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文件。





而在未添加上述操作之前,iconfont资源请求的是alicdn 地址。


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台