                        課程
                    
                        /前端開發
                        
                            /React.JS
                        
                        /React實踐圖片畫廊應用（下）

webpack加載下載自阿里巴巴iconfont字體庫的字體文件出錯

跟著Materliu老師用react實現畫廊應用，做到導航條部分的時候使用iconfont，在樣式文件中書寫了以下聲明：

@font-face {

font-family: "iconfont";

src: url('../fonts/iconfont.eot'); /* IE9*/

src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */

src: url('../fonts/iconfont.woff') format('woff'); /* chrome, firefox */

src: url('../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

src: url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

結果發現字體文件加載錯誤。錯誤信息如下，有知道錯在哪里么？

(unknown) ./src/fonts/iconfont.ttf Module parse failed:?

C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\src\fonts\iconfont.ttf?

Unexpected character '' (1:0)

?You may need an appropriate loader to handle this file type.

?SyntaxError: Unexpected character '' (1:0) ? ?at Parser.pp$4.raise (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) ? ?at Parser.pp$7.getTokenFromCode (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10) ? ?at Parser.pp$7.readToken (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17) ? ?at Parser.pp$7.nextToken (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15) ? ?at Parser.parse (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\node_modules\acorn\dist\acorn.js:515:10) ? ?at Object.parse (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) ? ?at Parser.parse (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\lib\Parser.js:902:15) ? ?at NormalModule.<anonymous> (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack\lib\NormalModule.js:104:16) ? ?at NormalModule.onModuleBuild (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) ? ?at nextLoader (C:\Users\612226\Documents\html5\reactJS\projects\YesGalleryByReact\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) @ ./~/css-loader!./~/[email protected]@autoprefixer-loader?{browsers:["last 2 versions"]}!./~/[email protected]@sass-loader/lib/loader.js?outputStyle=expanded!./src/styles/App.scss 6:359-391