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

算力阿峰

2026-8-5

Vite 复制 node_modules 中主题资源的解决方案

核心问题解答

Vite没有原生支持直接复制指定依赖资源到打包目录的功能，需要借助第三方插件实现。
最适配的插件是 vite-plugin-static-copy，专门用于在 Vite 构建流程中复制静态资源，完全满足你的需求。

具体实现步骤

1. 安装插件

执行命令安装依赖：

npm install vite-plugin-static-copy --save-dev
# 或使用 yarn
yarn add vite-plugin-static-copy -D

2. 配置 Vite 配置文件（vite.config.js）

在配置文件中引入并启用插件，精准指定要复制的 foo-styles 主题文件路径：

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/foo-styles/dist/themes/**/*', // 匹配所有主题下的CSS变量文件及子目录
          dest: 'assets/themes' // 打包后文件的输出目录，可根据需求自定义
        }
      ]
    })
  ]
});

src：通过 glob 模式匹配目标文件，**/* 表示匹配 themes 目录下所有层级的文件和子目录
dest：设定打包后资源的存放路径，示例中最终访问路径为 /assets/themes/{theme}/color-variables.css

3. 在 Svelte 组件中动态引用主题文件

在 <svelte:head> 中根据当前激活主题动态加载对应 CSS 文件：

<script>
  import { theme } from './stores.js'; // 假设使用 Svelte store 管理主题状态
</script>

<svelte:head>
  {#if $theme}
    <link rel="stylesheet" href={`/assets/themes/${$theme}/color-variables.css`} />
  {/if}
</svelte:head>