я пытаюсь интегрировать некоторые шрифты (FontAwesome, Roboto, ...) я начал с FontAwesome
Папка: Projectfolder
Projectfolder / assets / fonts / // all ttf, eof,SVG-файлы здесь
Папка проекта / public / // index.html и приложение css здесь
Папка проекта / web / // webpack.config.js "
web / webpack.config.js:
const appDirectory = path.resolve(__dirname, './../');
test: /\.js$/,
include: [
path.resolve(appDirectory, './assets'),
{...}
const ttfLoaderConfiguration = {
test: /\.ttf$/,
use: [
{
loader: 'file-loader',
options: {
name: './fonts/[hash].[ext]',
},
},
],
include: [
path.resolve(appDirectory, './src/assets'),
path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
path.resolve(appDirectory, './assets'),
],
};
app.css:
#root {
display: flex;
flex-direction: column;
min-height: 100vh;
@font-face {
font-family: "FontAwesome";
src: url("../assets/fonts/FontAwesome.eot");
src: url("../assets/fonts/FontAwesome.eot") format("embedded-opentype"),
url("../assets/fonts/FontAwesome.woff2") format("woff2"),
url("../assets/fonts/FontAwesome.woff") format("woff"),
url("../assets/fonts/FontAwesome.ttf") format("truetype"),
url("../assets/fonts/FontAwesome.svg") format("svg");
font-weight: normal;
font-style: normal;
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="app.css">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
<script src="assets/bundle.js"></script>
</html>
Но единственный результат, который я получаю, это: есть кто-тоопыт в такой ситуации и подскажите как это сделать? или что я делаю не так
