如何在Vite/Rollup中将多输出包（含CSS）分组到对应子目录？

我正在开发一个基于Vite的Svelte项目，需要配置多输入与输出目录来处理非Svelte相关内容，希望复用现有打包工具而非新建项目。目前已通过input指定构建路径，但仅JS文件生效，CSS文件仍输出到dist根目录，不符合需求。

当前vite.config.js相关配置如下：

build: {
    emptyOutDir: true,
    rollupOptions: {
        input: {
            'svelte/bundle': './src/main.js',
            'admin/bundle': './admin/index.js'
        },
        output: {
            dir: '../../dist',
            entryFileNames: '[name].js',
            assetFileNames: '[name][extname]'
        },
    },
},
plugins: [svelte()]

期望输出目录结构：

dist/
├─ svelte/
│  ├─ bundle.js
│  └─ styles.css
└─ admin/
   ├─ bundle.js
   └─ styles.css

实际输出目录结构：

dist/
├─ svelte/
│  └─ bundle.js
├─ admin/
│  └─ bundle.js
├─ index.css
└─ main.css

如何确保所有CSS文件也能归入各自对应的子目录？

问题核心是assetFileNames的配置未将资源与对应入口关联。Rollup提供的[chunkName]占位符可绑定入口chunk名称，以此让CSS文件跟随入口的目录结构输出，同时需调整Svelte插件的CSS处理逻辑配合生效。

修改后的vite.config.js配置如下：

build: {
    emptyOutDir: true,
    rollupOptions: {
        input: {
            'svelte/bundle': './src/main.js',
            'admin/bundle': './admin/index.js'
        },
        output: {
            dir: '../../dist',
            entryFileNames: '[name].js',
            // 用[chunkName]关联入口，让资源文件匹配入口的目录路径
            assetFileNames: '[chunkName][extname]'
        },
    },
},
plugins: [svelte({
    compilerOptions: {
        css: false // 禁用Svelte内置CSS处理，交给Rollup统一管理
    },
    onwarn: (warning, handler) => {
        // 按需忽略无关警告，比如未使用的选择器警告
        if (warning.code === 'css-unused-selector') return;
        handler(warning);
    }
})]

关键说明 #

• assetFileNames: '[chunkName][extname]'：[chunkName]会读取对应入口的名称（如svelte/bundle），使CSS文件输出为svelte/bundle.css，自动归入对应子目录。
• css: false：让Rollup接管CSS提取工作，确保组件内的样式和单独引入的CSS文件都能与入口chunk绑定，按规则输出到目标目录。

内容的提问来源于stack exchange，提问作者verism