Как добавить CSS из node_modules в template.html в Svelte

Question

У меня есть приложение sapperjs, которое вам нравится, когда вы звоните npx degit sveltejs/sapper-template my-app. Я хотел бы добавить шрифт. Обычные люди могут добавить такую ​​строку к app/template.html:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab">

Сетевые причины делают это непрактичным, поэтому я хочу разместить шрифт локально. В create-реагировать-приложение я бы просто import 'typeface-roboto-slab' в верхней части моего App.jsx или эквивалентного компонента. Как мне добиться подобного эффекта в моем приложении sapper / svelte?

Я считаю, что лучше всего добавить его к app/template.html, потому что где-нибудь еще и CSS будет ограничен отдельным компонентом. Это похоже на то, что нужно почти любому приложению, но ничего в этом нет в документах, которые я могу найти.

Answer 1

Это не так упрощено, как 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 Саппер получил возможность напрямую импортировать файлы CSS, но в настоящее время он не знает, как обращаться с ссылочными файлами, такими как url('./files/roboto-slab-latin-100.woff2'). Это будет поддерживаться в будущей версии, и тогда вы сможете использовать шрифты так же, как в CRA.