CODEWITHSUNDEEP
vue.jsviterollup
CornerSyrup
CornerSyrup

Reputation: 161

Styles is missing after I bundle my project with Vite

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>

Upvotes: 5

Views: 7590

Answers (1)

CornerSyrup
CornerSyrup

Reputation: 161

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

Upvotes: 9

Related Questions