css - 如何在 Svelte 中将 CSS 从 node_modules 添加到 template.html
问题描述
我有一个 sapperjs 应用程序,就像你从 call 获得的应用程序一样npx degit sveltejs/sapper-template my-app
。我想添加一个字体。普通人可能会在下面添加这样的一行app/template.html
:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab">
网络原因使这不切实际,所以我想在本地托管字体。在 create-react-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 中一样使用字体。
推荐阅读
- javascript - 如何将innerHTML添加到从节点JS发送的静态文件中?
- typescript - 为外部 js nodejs 包编写 typescript 声明文件,没有类型信息
- python - Pandas 根据索引标签选择特定列中的值
- python - 使用 pandasql 时如何保持日期格式?
- android - 当我在按钮上设置 onClickListener 时,为什么字符串 String 的评估结果为 null?
- intellij-idea - 如何在intellij中查找一行并替换为具有相同缩进的两行
- html - 垂直对齐页面上的元素,同时保持相同的高度
- proxy - iOS 13 Burp Suite 代理无法连接
- php - PHP | 来自 SQL 数据库的饼图
- java - 如何创建安全的 vaadin 14 登录表单?