如何在 Svelte 中将 CSS 从 node_modules 添加到 template.html

Posted 2023-03-07

【中文标题】如何在 Svelte 中将 CSS 从 node_modules 添加到 template.html

【英文标题】：How to add css from node_modules to template.html in Svelte

【发布时间】：2019-02-07 07:15:21

【问题描述】：

我有一个 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 中，我只需将 import 'typeface-roboto-slab' 放在我的 App.jsx 或等效组件的顶部。如何在我的 sapper/svelte 应用中实现类似的效果？

我认为最好将它添加到app/template.html，因为其他任何地方和 css 都将被限定为单个组件。这似乎是几乎所有应用程序都需要的东西，但在我能找到的文档中却没有。

【参考方案1】：

它不像 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 中一样使用字体。

【讨论】：

嗨 Rich，我正在使用 rollup-plugin-css-only 导入 css 样式“import 'node_modules/.../file.css'”。样式看起来不错，但无法解析图像的路径。会是同样的问题还是图像文件有解决方案？

是否有一些汇总插件（这里没有工兵，只是苗条）支持从 npm 包导入 css，它还支持引用文件（字体、图标、图像）？？？