2016-02-28 125 views
0

我对这一切都比较陌生,一直在努力让我的字体被包含到我的style.css中。Webpack无法加载字体文件

起初并没有将文件加载由于路径是不正确的(显然它正在从根而不是字体目录本身中的相对路径)

不似乎找到了文件,但告诉我我正在使用错误的加载器。 见下图:

module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     }, 
     { 
     test: /\.scss?$/, 
     loader: ExtractTextPlugin.extract('css!sass') 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader?limit=100000' 
     } 
    ] 
    }, 

我得到的错误是: enter image description here

任何帮助表示赞赏。

+0

BTW,我不知道为什么它说“无法找到模块...... main.scss”如果我删除了@import的字体它发现它很好... – Stefan

回答

0

您确定它是url-loader但不是file-loader

因为url-loader使用dataUrls和file-loader发出文件。

让我们试试下面看看它的作品〜

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

+0

没有运气,奇怪的是,虽然这确实解决了我在我的字体目录中的相对路径不完全正确的另一个问题。但是,否则相同的错误:“模块解析失败:...第1行:意外的令牌非法...您可能需要一个适当的加载器来处理这种文件类型。” – Stefan