如何阻止Vite构建Vue插件时拆分CSS？

你设置build.cssCodeSplit: false后仍生成单独style.css，是因为这个配置仅控制是否将CSS拆分为多个文件，而非禁止提取CSS到单独文件。要将CSS内联到JS库文件中，需通过Rollup插件配置实现：

步骤1：安装依赖 #

安装rollup-plugin-postcss来控制CSS的打包行为：

npm install rollup-plugin-postcss --save-dev

步骤2：修改vite.config.ts #

更新配置文件，导入插件并在rollupOptions中添加CSS内联配置：

import { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "node:path";
import postcss from 'rollup-plugin-postcss'; // 导入插件

export default defineConfig(({ mode }) => {
    process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

    return {
        plugins: [
            vue({
                template: {
                    transformAssetUrls: {
                        includeAbsolute: false,
                    },
                },
            }),
        ],
        resolve: {
            alias: {
                "@": fileURLToPath(new URL("./src", import.meta.url)),
            },
        },
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@import "@/assets/framework.scss";`,
                },
            },
        },
        build:
            process.env.VITE_PACKAGE_MODE === "true"
                ? {
                        cssCodeSplit: false,
                        lib: {
                            name: "vue-ecosphere",
                            entry: path.resolve(
                                __dirname,
                                "./src/plugin/plugin.ts"
                            ),
                            fileName(format) {
                                return `vue-ecosphere.${format}.js`;
                            },
                        },
                        rollupOptions: {
                            external: ["vue"],
                            output: {
                                globals: {
                                    vue: "Vue",
                                },
                            },
                            plugins: [
                                postcss({
                                    inject: true, // 将CSS注入到JS文件中
                                    extract: false, // 禁止生成单独的CSS文件
                                    minimize: true, // 可选：压缩CSS代码
                                    use: ['sass'], // 支持SCSS预编译
                                }),
                            ],
                        },
                        emptyOutDir: true, // 可选：每次构建清空dist目录
                  }
                : {},
    };
});

步骤3：重新构建 #

执行npm run build后，dist目录将不再生成style.css，所有CSS代码会被内联到vue-ecosphere.es.js和vue-ecosphere.umd.js中。用户通过import Ecosphere from 'vue-ecosphere'引入插件时，CSS会自动注入到页面的<style>标签中。

如果不需要public目录下的资源（如favicon.ico、logo.png），可以在build配置中添加publicDir: false，禁止复制public目录文件到dist。

内容的提问来源于stack exchange，提问作者bacon-delight