Styles is missing after I bundle my project with Vite - vue.js

Question

As title, my styles (including style tag in SFC and css imported to app.ts) are missing when I compile my app in IIFE format.
I have no idea whether it's by Vite or RollUp... It works properly with vite serve, but not vite build.
I saw the css emitted in other format, but not IIFE. For that, I can't load Vue form CDN, which I want to.
// vite.config.js
import vue from "#vitejs/plugin-vue";
import { defineConfig } from "vite";
import env from "vite-plugin-env-compatible";
export default defineConfig({
plugins: [
env({
prefix: "",
mountedPath: "process.env",
}),
vue(),
],
build: {
minify: true,
rollupOptions: {
external: ["vue"],
output: {
format: "iife",
globals: {
vue: "Vue",
},
},
},
},
});
// src/app.ts
import { createApp } from "vue";
import App from "./App.vue";
import "./main.css";
createApp(App).mount("#app");
<!-- src/App.vue -->
<template>
<h1>Hello World</h1>
<button #click="increment">Click Me!</button>
<div>Clicked: {{ count }}</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
//#region Counter
const count = ref(0);
const increment = () => (count.value += 1);
//#endregion
</script>
<style scoped>
h1 {
color: green;
}
</style>

Answer 1

I found in documentation, all I need is setting build.cssCodeSplit to false.
https://vitejs.dev/guide/features.html#css-code-splitting
Related issue for follow up