下載了幾個(gè)IconFont的圖標(biāo),想引入壓縮包里的css,再用<i class="iconfont icon-xxx"></i>的方式使用,未成功~

項(xiàng)目目錄如下:

幾種引入方式及表現(xiàn)如下:
1.在index.html內(nèi)用<link rel="stylesheet" href="src/css/iconfont.css">引入;
表現(xiàn):npm未報(bào)錯(cuò),但瀏覽器調(diào)試network如下,iconfont.css文件狀態(tài)為404

2.在main.js引入:import './css/iconfont.css';或在使用到此圖標(biāo)的.vue組件內(nèi)引入:

<style>
@import '../css/iconfont.css'
  
</style>

表現(xiàn)相同,如下報(bào)錯(cuò)且調(diào)試network無(wú)iconfont.css文件:

看報(bào)錯(cuò)好像是css文件被當(dāng)成了模塊,是這樣的引入方式有誤嗎?還是別的什么原因?
求指教~謝謝!