如何使用Vite / SvelteKit从node_modules复制文件？

Question

如何使用Vite / SvelteKit从node_modules复制文件？

我对主题内容有一个节点模块依赖项，位于node_modules/foo-styles.

对于我想要引入的大多数 css，我可以简单地import 'foo-styles/dist/controls/button.css'在页面/组件中使用 an ，而 vite 会发挥其魔力，将 css 推到最适合的位置。

然而，对于主题，我需要根据我的中的活动主题切换包含的 css 变量文件<svelte:head>，例如foo-styles/dist/themes/{$theme}/color-variables.css标记中的引用。为此，我假设 vite 必须将这些文件从node_modules/foo-styles我的应用程序资产目录复制到，而无需导入魔法、重命名文件等。

我只能找到使用 webpack 或 rollup 使用复制插件执行此操作的示例...这是 vite 可以开箱即用的功能吗？有可用的插件吗？如何将资产从 node_module 依赖项复制到捆绑包？

Answer 1

H.B*_*.B. 5

?url您可以通过添加导入来使Vite复制资产并返回URL 。有了这个，您就可以动态地添加一个带有所述 URL 的link内容<head>。

例如

import themeUrl from 'some-module/css/theme.css?url'

onMount(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = themeUrl;
    document.head.appendChild(link);

    return () => link.remove();
});

Run Code Online (Sandbox Code Playgroud)

如果您不想手动列出所有主题导入，可以使用 Vite 的glob 导入功能。这里 URL 必须以不同的方式编写，因为它必须以/或开头./：

const styles = import.meta.glob(
    '/node_modules/some-module/css/*.css',
    { query: 'url', eager: true },
);

let selectValue = 'some-theme';
$: selectedStyle = `/node_modules/some-module/css/${selectedValue}.css`;
let link = null;

onMount(() => {
    link = document.createElement('link');
    link.rel = 'stylesheet';
    document.head.appendChild(link);

    return () => link?.remove();
});

$: if (link) {
    const { default: href } = styles[selectedStyle];
    link.href = href;
}

Run Code Online (Sandbox Code Playgroud)

您还可以使用svelte:head，它可以更简单，并且会在 SSR 期间添加样式引用，但是样式表的顺序可能不一致，因为样式可能在首次加载时添加在其他样式之前，但在导航时添加在这些样式之后，因此规则可能会被意外覆盖。

<script>
    const styles = import.meta.glob(
        '/node_modules/some-module/css/*.css',
        { query: 'url', eager: true },
    );
    
    let selectValue = 'some-theme';
    $: href = styles[`/node_modules/some-module/css/${selectedValue}.css`].default;
</script>

<svelte:head>
    <link rel="stylesheet" {href} />
</svelte:head>

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，11 月前
查看次数：	2872 次
最近记录：	2 年，11 月前