鍍金池/ 問答/HTML5  HTML/ 如何在vue項(xiàng)目中使用icomoon？

如何在vue項(xiàng)目中使用icomoon？

我在vue項(xiàng)目中按照官網(wǎng)的例子使用icomoon出現(xiàn)module not found 的問題
我在style.css中的代碼:

@font-face {
  font-family: 'index';
  src:  url('fonts/icomoon.eot?r30znd');                     /* IE9 Compat Modes */
  src:  url('fonts/icomoon.eot?r30znd#iefix') format('embedded-opentype'),  /* IE6-IE8 */
        url('fonts/icomoon.ttf?r30znd') format('truetype'),      /* Safari, Android, iOS */
        url('fonts/icomoon.woff?r30znd') format('woff'),          /* Modern Browsers */
        url('fonts/icomoon.svg?r30znd#icomoon') format('svg');   /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

引用css的時(shí)候就會(huì)報(bào)出如下錯(cuò)誤:

./node_modules/_css-loader@0.28.7@css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-02c3df16","scoped":true,"hasInlineConfig":false}!./node_modules/_less-loader@4.0.5@less-loader/dist/cjs.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/common/footer.vue
Module not found: Error: Can't resolve '../icomoon.eot?r30znd' in
'D:/Users/Administrator/WebstormProjects/veshop/src/common'

我把路徑改成'/fonts/icomoon.eot'的話就不報(bào)錯(cuò)，也找不到文件,
如果改成其他相對路徑都會(huì)報(bào)cannot resolve directory ‘fonts’ 的錯(cuò)

文件結(jié)構(gòu)如圖:

圖片描述

我想請教下這相對路徑該如何修改才能正確顯示圖標(biāo)?

回答
編輯回答
乖乖瀦

npm install css-loader style-loader url-loader
并在rules里添加 {

      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 1000, // 1 KO
        name: 'fonts/[name].[hash:7].[ext]'
      }
    },
2018年5月11日 06:31
編輯回答
莓森

分享下我找到的答案：https://stackoverflow.com/que...

2017年12月30日 15:07
編輯回答
懶豬

我們使用的是less，我們把fonts.css改為fonts.less就解決了這個(gè)問題

我們less的loader是這樣的

test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
2017年1月15日 03:17