У меня есть приложение sapperjs, подобное тому, которое вы получаете при вызове npx degit sveltejs/sapper-template my-app. Я хочу добавить шрифт. Нормальные люди могут добавить к app/template.html такую строчку:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab">
Сетевые причины делают это непрактичным, поэтому я хочу разместить шрифт локально. В приложении create-response-app я бы просто import 'typeface-roboto-slab' в верхней части моего App.jsx или аналогичного компонента. Как я могу добиться аналогичного эффекта в моем приложении sapper / svelte?
Я считаю, что лучше всего добавить его в app/template.html, потому что где-нибудь еще, и CSS будет привязан к отдельному компоненту. Это похоже на то, что может понадобиться почти любому приложению, но ничего об этом в документации, которую я могу найти.
Это не так оптимизировано, как CRA (пока!), Но вы можете добиться этого довольно просто, скопировав шрифты в папку assets ...
npm i typeface-roboto-slab
cp -r node_modules/typeface-roboto-slab assets
... затем добавляем <link> в ваш app/template.html:
<link rel="stylesheet" href="typeface-roboto-slab/index.css">
В версии 0.19 Sapper получил возможность напрямую импортировать файлы CSS, но в настоящее время он не знает, как работать со ссылочными файлами, такими как url('./files/roboto-slab-latin-100.woff2'). Это будет поддерживаться в будущей версии, и тогда вы сможете использовать шрифты так же, как и в CRA.