【webpack】戴入字型檔 error

sexyoung
進擊的 Tool’ s
2 min readSep 15, 2015

最近很流行使用字型檔來戴入 icon, 但在 webpack 裡,似乎會出一點錯:
如果你使用了:

{test: /\.woff$/, loader: “url-loader?limit=10000&minetype=application/font-woff”},
{test: /\.woff2$/, loader: “url-loader?limit=10000&minetype=application/font-woff”},
{test: /\.ttf$/, loader: “file-loader”},
{test: /\.eot$/, loader: “file-loader”},
{test: /\.svg$/, loader: “file-loader”}

像類似這種 module loader 的話,它就會跟你說:

You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

以 fontawesome 為例,我安裝了 react-fa 之後,要在 node_modules/react-fa/node_modules/font-awesome/font-awesome.css 最上面你可以看到:

src: url(‘../fonts/fontawesome-webfont.eot?v=4.4.0’);

重點就在那個 ?v=4.4.0,把它們移除後,就可以讀得到啦~

https://github.com/webpack/less-loader/issues/44

--

--