配置 Vanilla TS Vite 项目以保持 CSS 文件分离

Question

我正在尝试使用 vanilla TS 和 Vite 4 建立一个基本（css）库。

我希望在顶层有一个主要的 js 和 css 文件，这样你就可以一次性导入整个内容。我还想要组件级导入，您可以选择仅导入组件 js + css。组合的 css 和 JS 文件工作正常；并且单个组件 JS 文件也工作正常。

目前我遇到了这样的问题：捆绑后我似乎无法在 JS 文件旁边保留 CSS 文件的独立版本。我的构建当前正在创建：

我已经阅读了 Vite 和 Rollup 的文档，但我似乎不知道如何对我的 CSS 执行与对 JS 执行的操作相同的操作。

dist
--components
----button
------button.js
--main.css
--main.js

My preferred output would be:

dist
--components
----button
------button.js
------button.css
--main.css
--main.js

In my `main.ts` I'm importing:

import './style.scss'
import './tokens.scss'
import './components/button/button.scss'

vite.config.js

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  build: {
    cssCodeSplit: false,
      manifest: true,
    rollupOptions: {
      output: {
        assetFileNames: () => 'main[extname]',
      }
    },
    lib: {
      formats: ['es'],
      entry: {
        main: resolve(__dirname, 'src/main.ts'),
        button: resolve(__dirname, 'src/components/button/button.ts')
      },
      name: 'CSSFramework',
      fileName: (_, fileName) => fileName === 'main' ? '[name].js' : 'components/[name]/[name].js',
    },
  },
});

提前致谢 ！