我正在尝试在我的React项目中使用一些本地Web字体.我将它们包含在我的main.scss文件中,并通过webpack加载它们.捆绑包构建正确,包括main.scss样式.我看到webpack加载了字体文件,并将它们复制到public / fonts /,但我的bundle文件找不到字体.
据我了解,你的@ font-face src应该与bundle的位置有关.我将此设置为与在webpack中加载字体的路径相同,’./ fonts /’.我看到的确切错误是：@H_403_3@
file:///Users/myusername/Documents/folder1/folder2/folder3/APP/fonts/FoundersGroteskWeb-Regular.woff net::ERR_FILE_NOT_FOUND
我一直在尝试很多不同的路径配置,并且在webpack中使用了publicPath选项,但是我现在正在围绕看起来非常简单的引用错误.@H_403_3@
APP
├──webpack.config.js
├──src
├──app
├──App.jsx
├──styles
├──main.scss
├──fonts
├──allthefonts.woff
├──public
├──bundle.js
├──fonts
├──allthefonts.woff
App.jsx：@H_403_3@
require('./styles/main.scss');
main.scss：@H_403_3@
@font-face {
font-family: FoundersGrotesk;
src: url('./fonts/FoundersGroteskWeb-Bold.eot') format('eot'),url('./fonts/FoundersGroteskWeb-Bold.woff') format('woff'),url('./fonts/FoundersGroteskWeb-Bold.woff2') format('woff2');
font-weight: bold;
}
@font-face {
font-family: FoundersGrotesk_Cnd;
src: url('./fonts/FoundersGrotXCondWeb-Bold.eot') format('eot'),url('./fonts/FoundersGrotXCondWeb-Bold.woff') format('woff'),url('./fonts/FoundersGrotXCondWeb-Bold.woff2') format('woff2');
font-weight: bold;
}
@font-face {
font-family: FoundersGrotesk;
src: url('./fonts/FoundersGroteskWeb-Regular.eot') format('eot'),url('./fonts/FoundersGroteskWeb-Regular.woff') format('woff'),url('./fonts/FoundersGroteskWeb-Regular.woff2') format('woff2');
font-weight: normal;
}
webpack.config.js：@H_403_3@
'use strict';
const webpack = require('webpack');
const PROD = JSON.parse(process.env.PROD_ENV || '0');
module.exports = {
entry: './src/app/App.jsx',output: {
path: './src/public/',filename: PROD ? 'bundle.min.js' : 'bundle.js'
},module: {
loaders: [
{
test: /\.jsx?$/,loader: 'babel-loader',exclude: '/node_modules/',query: {
presets: ['es2015','react','stage-1']
}
},{
test: /\.s?css$/,loaders: ['style','css','sass']
},{
test: /\.(eot|svg|ttf|woff|woff2)$/,loader: 'file-loader?name=./fonts/[name].[ext]'
}
]
}
};
解决方法
得益于@omerts在
this thread中获得了一个有效的解决方案.解决方案涉及使用publicPath.我一直试图用它作为module.exports中的一个选项,使用字体文件加载器,而不是输出.
更新了webpack.config.js：@H_403_3@
const webpack = require('webpack');
const PROD = JSON.parse(process.env.PROD_ENV || '0');
const path = require('path');
const PATHS = {
build: path.join(__dirname,'./src/public')
};
module.exports = {
entry: './src/app/App.jsx',output: {
path: PATHS.build,filename: PROD ? 'bundle.min.js' : 'bundle.js',publicPath: PATHS.build
},loader: 'file-loader?name=/fonts/[name].[ext]'
},{
test: /\.(jpg|png)$/,loader: 'file-loader?name=/fonts/[name].[ext]'
}
]
},plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({
beautify: false,comments: false,compress: {
warnings: false,drop_console: true
},mangle: {
except: ['$'],screw_ie8: true,keep_fnames: false
}
})
] : []
};
