如何在 Svelte 中将 css 从 node_modules 添加到 template.html
How to add css from node_modules to template.html in Svelte
我有一个 sapperjs 应用程序，就像您通过调用 npx degit sveltejs/sapper-template my-app 获得的应用程序一样。我想添加一种字体。普通人可能会在 app/template.html:
中添加这样一行
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab">
网络原因使这不切实际，所以我想在本地托管字体。在 create-react-app 中，我会在 App.jsx 或等效组件的顶部简单地 import 'typeface-roboto-slab' 。我怎样才能在我的 sapper/svelte 应用程序中实现类似的效果？
我认为最好将它添加到 app/template.html，因为在其他任何地方，css 都将限定为单个组件。这似乎是几乎所有应用程序都需要的东西，但在我能找到的文档中却一无所获。
它不像 CRA 那样精简（还！），但您可以通过将字体复制到 assets 文件夹中来相当简单地实现此目的...
npm i typeface-roboto-slab
cp -r node_modules/typeface-roboto-slab assets
...然后在 app/template.html 中添加 <link>:
<link rel="stylesheet" href="typeface-roboto-slab/index.css">
在 0.19 版本中，Sapper 获得了直接导入 CSS 文件的能力，但目前不知道如何处理 url('./files/roboto-slab-latin-100.woff2') 等引用文件。这将在未来的版本中得到支持，然后您将能够像在 CRA 中一样使用字体。
我有一个 sapperjs 应用程序，就像您通过调用 npx degit sveltejs/sapper-template my-app 获得的应用程序一样。我想添加一种字体。普通人可能会在 app/template.html:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab">
网络原因使这不切实际，所以我想在本地托管字体。在 create-react-app 中，我会在 App.jsx 或等效组件的顶部简单地 import 'typeface-roboto-slab' 。我怎样才能在我的 sapper/svelte 应用程序中实现类似的效果？
我认为最好将它添加到 app/template.html，因为在其他任何地方，css 都将限定为单个组件。这似乎是几乎所有应用程序都需要的东西，但在我能找到的文档中却一无所获。
它不像 CRA 那样精简（还！），但您可以通过将字体复制到 assets 文件夹中来相当简单地实现此目的...
npm i typeface-roboto-slab
cp -r node_modules/typeface-roboto-slab assets
...然后在 app/template.html 中添加 <link>:
<link rel="stylesheet" href="typeface-roboto-slab/index.css">
在 0.19 版本中，Sapper 获得了直接导入 CSS 文件的能力，但目前不知道如何处理 url('./files/roboto-slab-latin-100.woff2') 等引用文件。这将在未来的版本中得到支持，然后您将能够像在 CRA 中一样使用字体。