如何在组件库的“原始”导入中导入捆绑的css文件?

我在一个单间图书馆里保存着一批私人图书馆。

有些库包含css(使用scs模块),有些则不包含。

因为我想使用应用程序来决定如何处理库的css,所以只有在必要的时候,我才会注入css文件的导入。我 不要 想要在页面中注入CSS或其他插件可以做的任何事情。只需引用CSS,让最终的bundler知道有一个CSS文件需要处理。

为了澄清,我想注射 import './index.css'; 当捆绑的js文件存在时,位于该文件的顶部。

原因在中得到了很好的解释 vite-plugin-lib-inject-css ,它在我的repo的先前架构中运行良好(我们正在从vite迁移到tsup)。

我试着玩横幅:

type TsupOptions = Parameters<typeof defineConfig>[0];

function getTsupPackageConfig(): TsupOptions {
    return {
        entry: ["src/index.ts"],
        format: ["cjs", "esm"],
        sourcemap: true,
        clean: true,
        bundle: true,

        esbuildPlugins: [
            sassPlugin(),
        ],
        banner: (ctx) => {
            switch (ctx.format) {
                case "cjs":
                    return { js: `require('./index.css');` };
                case "esm":
                    return { js: `import './index.css';` };
                default:
                    throw new Error(`Unsupported format: ${ctx.format}`);
            }
        },
    };
}

这注入了css文件导入,但我不知道如何将此导入限制为仅使用css的包。

仅供参考,实际的完整代码是:

/*
 * tsup.config.ts (in every packages)
 */
import { defineConfig } from "tsup";

import { getTsupPackageConfig } from "../../scripts/getTsupConfig";

export default defineConfig(getTsupPackageConfig());



/*
 * getTsupConfig.ts (in a shared utils folder)
 */
import postcssDts from "@guanghechen/postcss-modules-dts";
import { sassPlugin } from "esbuild-sass-plugin";
import postcss from "postcss";
import postcssModules from "postcss-modules";
import { defineConfig } from "tsup";

type TsupOptions = Parameters<typeof defineConfig>[0];

function getTsupPackageConfig(): TsupOptions {
    return {
        entry: ["src/index.ts"],
        format: ["cjs", "esm"],
        sourcemap: true,
        clean: true,
        bundle: true,
        esbuildPlugins: [
            sassPlugin({
                transform: async (source, resolveDir, filePath) => {
                    const { css } = await postcss([
                        postcssModules({
                            ...postcssDts({
                                semicolon: true,
                            }),
                        }),
                    ]).process(source, {
                        from: filePath,
                    });
                    return css;
                },
            }),
        ],
        loader: {
            ".png": "file",
            ".svg": "file",
        },

        banner: (ctx) => {
            switch (ctx.format) {
                case "cjs":
                    return { js: `require('./index.css');` };
                case "esm":
                    return { js: `import './index.css';` };
                default:
                    throw new Error(`Unsupported format: ${ctx.format}`);
            }
        },
    };
}

export { getTsupPackageConfig };