如何从 svelte-kit 应用程序中的 node_modules 加载 pico css？

Question

已安装

$ npm install @picocss/pico -D

在 rollup.config.js 中：

import css from "rollup-plugin-css-only";


...
    plugins: [
        css({ output: "static/bundle.css" }),
    ],

在 ./routes/__layout.svelte 我有：

<script>
    import "../../node_modules/@picocss/pico/css/pico.min.css";

</script>

只是在 UI 中出现错误，并且不存在 css /bundle.css。

Answer 1

我今天刚刚使用它。 我试过这个：

<script>
  import "@picocss/pico/css/pico.min.css";
</script>

我没有遇到任何错误，但没有尝试其他任何事情。

就我而言，我从 CDN 导入原始 HTML，效果很好。

Answer 2

我刚刚在+page.svelte中导入了this：

<script>
    import '@picocss/pico'
</script>

您可以在此处查看正在运行的链接代码：https://m.leftium.com/

我还没有尝试过从 +layout.svelte 导入，但我认为这也可以。

---

有一个 Github 问题评论 解释了如何更彻底地将 Pico CSS 与 SvelteKit 集成：

Pico 依赖于

main

、

footer

、

header

作为某些布局的

body

的直接子级，但如果你做得正确的话，这对于 sveltekit 来说是不可能的。

但是，pico 有一个

$semantic-root-element

变量，您可以将其设置为此元素：

<div style="display: contents">%sveltekit.body%</div>

。到目前为止，这已经解决了我的问题，但我还没有尝试一切。

我就是这样做的。

<!-- app.html -->
<div id="pico-root" style="display: contents">%sveltekit.body%</div>

// variables.scss
$semantic-root-element: "div#pico-root"

// OR whever you import pico
$semantic-root-element: "div#pico-root"
@import '@picocss/pico/scss/pico';