?

使用環(huán)境：開發(fā)環(huán)境內(nèi)網(wǎng) node + React + antd ??

第一種方法：[推薦]

第一種方法[原創(chuàng)]： 想在網(wǎng)上找到的第二種方法，試驗(yàn)一下可以。但是我不想 失去按需加在css的功能，所以自己查看antd模塊源碼，終于被我找到 定義 字體和圖表文件請求路徑的位置。只需要替換 該路徑為自己內(nèi)網(wǎng)可訪問的路徑即可。我是放在本項(xiàng)目的主目錄新建font目錄下。 首先，把官網(wǎng)下載的字體文檔 壓縮包解壓，里面demo** 的文件不需要，是個(gè)例子。 將其余的?iconfont開頭的6個(gè)文件復(fù)制到自己項(xiàng)目下（可隨意位置，和后面請求對應(yīng)即可） 然后，到安裝的.node_modules\antd\lib\style\themes目錄下?default.less 文件，修改請求路徑 大約在62行：我的修改為?

// ICONFONT

@iconfont-css-prefix : anticon;

@icon-url : "http://localhost:8080/monitor/font/iconfont";

http://localhost:8082/ds_monitor/訪問項(xiàng)目的主目錄 font 自己定義的存放字體圖標(biāo)的文件 iconfont 文件名稱，其他代碼會添加不同后綴獲取不同文件 完成。 注意：我的antd使用的是默認(rèn)主題，所以是default.less文件，如果你的 修改過antd的主題，則需要修改對應(yīng)主題的less -----------------------上面是一種方法------------------------- 第一種方法：網(wǎng)上找到的方法（可用，但感覺關(guān)閉按需加在不是最有解決辦法） 講你下載下來的官方提供的字體庫解壓后所有文件復(fù)制到node-默讀les/antd/dist目錄下? 創(chuàng)建新的文件夾iconfont 在你項(xiàng)目生成的css入口文件對應(yīng)的源碼less文件開始添加如下兩句話 我的是app.less [順序重要]

@import "~antd/dist/andt.less";

@icon-url: '~antd/dist/iconfont/iconfont';

第二句是引入你自己下載的本地 字體和圖標(biāo)庫。 此時(shí)編譯后 訪問 ，本地添加的字體圖表庫已經(jīng)可以顯示。但是原來模塊發(fā)送的字體請求 還是抱錯(cuò)。 此時(shí)相當(dāng)于你自己下載一個(gè)字體庫，antd默認(rèn)下載一個(gè)字體庫（內(nèi)網(wǎng)下載不成功）所有 重復(fù)下載。 解決辦法：將bable-plugin-import插件的 按需引入css；樣式功能關(guān)閉 找到開發(fā)項(xiàng)目主目錄下的.babelrc 這是配置bable的文件，修改為style：false

<span style="">{

"plugins": [["import", {

"libraryName": "antd",

"style": false

}]],

"presets": [

["es2015", "react"]

]

}</span>

第二種結(jié)束。

第三種方法：沒有成功[可省略節(jié)省時(shí)間]

25 MAY 2017?on?React,?Ant-Design??http://www.imshuai.com/ant-design-offline-icon/

最近在使用React實(shí)現(xiàn)公司一套系統(tǒng)的前端。控件庫，看中了螞蟻金服的Ant Design。

腳手架使用的是React官方的create-react-app，創(chuàng)建完成后，引入了Ant Design。在我自己的筆記本調(diào)試的都很好，但放到公司的開發(fā)機(jī)器上，發(fā)現(xiàn)圖標(biāo)資源都無法加載。馬上看了一下瀏覽器的資源請求情況，果然，Ant Design默認(rèn)使用的是阿里的CDN。

公司是內(nèi)網(wǎng)環(huán)境，顯然是行不通的。官方文檔果然給出了本地部署的提示。

研究了一番，發(fā)現(xiàn)主要是要覆蓋@icon-url這個(gè)less變量，所以就要開啟less支持。幸好官方在自定義主題一節(jié)，已經(jīng)給出了create-react-app中如何實(shí)現(xiàn)主題less變量的覆蓋；同理，在modifyVar節(jié)點(diǎn)增加@icon-url的覆蓋，如下：

modifyVars: {

// 修改整體主題顏色

// "@primary-color": "#1DA57A",

// 修改圖標(biāo)庫為本地離線，而不是阿里云CDN上的圖標(biāo)資源

"@icon-url": '"/iconfont/iconfont"' },

然后在/public目錄增加iconfront目錄，并將下載好的Web Font文件放到這個(gè)目錄即可。 不過還是有幾個(gè)細(xì)節(jié)要注意：

要同時(shí)修改webpack.config.dev.js和webpack.config.prd.js，保證測試環(huán)境和生產(chǎn)環(huán)境都生效。

iconfront文件夾要放在/public目錄，而不是/src目錄。雖然調(diào)試環(huán)境兩者都能生效，但生產(chǎn)環(huán)境后者是不生效的。

@icon-url的值里面有雙引號。


http://www.imshuai.com/ant-design-offline-icon/

轉(zhuǎn)載于:https://www.cnblogs.com/keepLeung/p/9596829.html

總結(jié)

以上是生活随笔為你收集整理的Ant Design离线使用Icon图标资源的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。