J'essaie d'utiliser des polices Web locales dans mon projet React. Je les inclue dans mon fichier main.scss et les charge via webpack. Le bundle se construit correctement, y compris main. styles scss. Je vois que webpack charge les fichiers de polices et les copie dans public/fonts /, mais mon fichier groupé ne trouve pas les polices.
Si je comprends bien, votre src @ font-face doit être en relation avec l'emplacement du bundle. Je mets cela sur le même chemin que celui avec lequel je charge les polices dans le webpack, './ fonts /'. L'erreur exacte que je vois est:
file:///Users/myusername/Documents/folder1/folder2/folder3/APP/fonts/FoundersGroteskWeb-Regular.woff net::ERR_FILE_NOT_FOUND
J'ai essayé beaucoup de configurations de chemins différents et j'utilise l'option publicPath dans webpack, mais je tourne en rond à ce stade sur ce qui semble être une erreur de référence très simple.
Structure du fichier:
APP
├──webpack.config.js
├──src
├──app
├──App.jsx
├──styles
├──main.scss
├──fonts
├──allthefonts.woff
├──public
├──bundle.js
├──fonts
├──allthefonts.woff
App.jsx:
require('./styles/main.scss');
main.scss:
@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:
'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]'
}
]
}
};
Vous avez une solution de travail grâce à @omerts dans ce fil . Solution impliquant l'utilisation de publicPath. J'avais essayé de l'utiliser comme option dans module.exports avec le chargeur de fichiers de polices, pas la sortie.
Mise à jour webpack.config.js :
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
},
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]'
},
{
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
}
})
] : []
};
une meilleure approche serait d'utiliser 'url-loader' et d'ajouter la ligne suivante dans les chargeurs.
{
test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
Est-il possible de simplement toujours référencer les polices d'origine? De toute façon, ils ne semblent pas être modifiés par le chargeur de fichiers.
APP
├───build
│ │ build.js
│ │ build.min.js
│ │
│ └───fonts
│ allthefonts.woff
│
├───css
│ main.css
│
├───fonts
│ allthefonts.woff
│
└───js
main.js
@font-face {
font-family: All-The-Fonts;
src: url('../fonts/allthefonts.woff') format('woff');
}
var path = require('path');
var webpack = require('webpack');
module.exports = {
...
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name].js",
globalObject: 'this'
},
module: {
rules: [
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './fonts/' //dont actually use these fonts but still need to process them
}
}]
}
]
},
...
};