如何在 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 中像这样导入：

<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';