字体真棒字体不加载在生产中，但加载罚款使用webpack-dev-server

我想在项目中使用字体真棒。我在开发过程中使用webpack-dev-server并且字体加载正常，但是当我使用webpack构建并打开结果（本地或托管在服务器上）时，woff,woff2和ttf文件都无法加载。字体真棒字体不加载在生产中，但加载罚款使用webpack-dev-server

我使用的是file-loader模块来处理所有的字体类型是这样的：

{test: /\.(eot|svg|ttf|woff|woff2)/, loader: "file"},

而我包括字体真棒SASS文件中像这样：

$fa-font-path: "./font-awesome-4.5.0/fonts"; 
@import "./font-awesome-4.5.0/scss/font-awesome.scss";

的我的webpack build的结果是一个与我的文件夹index.html,bundle.js和所有的字体文件。 Chrome开发者控制台显示的文件无法加载，但它们具有正确的文件名。

来源

2016-02-04 SimpleJ

问题是我的webpack配置有publicPath: "/"，所以这些文件是在我的文件系统的根目录而不是我的项目目录中。

更改为publicPath: ""修复了此问题。

来源

2016-02-07 22:44:53 SimpleJ

您可以尝试将其作为供应商依赖项包含在sass中：npm i -D font-awesome。这可能是字体路径不正确匹配。

module.exports = { 
    entry: { 
    main: './js/index.js', 
    vendor: [ 
     'font-awesome\css\font-awesome.css', 
    ], 
    }, 
    output: { 
    path: 'bundles', 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.css', 'scss'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.css$/, loaders: ['style', 'css'] }, 
     { test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin(
     'vendor', '[name].js' 
    ) 
    ] 
};

该css它将包括它与vendor.js文件内联。

来源

2016-02-04 21:42:49

虽然我不明白它可能是一个路径问题。我的构建的输出包括所有的字体文件，当服务器请求它们时，它没有路径。例如，我的内部版本有'a3de2170e4e9df77161ea5d3f31b2668.ttf'文件，当我运行'index.html'时，控制台说'GET file：///a3de2170e4e9df77161ea5d3f31b2668.ttf net :: ERR_FILE_NOT_FOUND'。我知道该文件在那里，它正在请求正确的文件路径。 – SimpleJ

是'file：///a3de2170e4e9df77161ea5d3f31b2668.ttf'控制台中字体的确切路径？ –

是的。我想我其实只是发现了这个问题。我在我的webpack配置中有'publicPath：“/”'，但它应该是'publicPath：'“'。这似乎解决了这个问题。 – SimpleJ

字体真棒字体不加载在生产中，但加载罚款使用webpack-dev-server

回答

相关问题