vite-plugin-federation doesn't load the styles of my components

Question

When I'm loading my components on my host app, the componnet loads with no css, I'm using Vite + Vue with tailwind, does anyone know how to load those styles?

This is my vite.conf.ts:

import federation from "@originjs/vite-plugin-federation";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";


export default defineConfig({
  server: {
    port: 8000,
  },
  build: {
    target: ["chrome101", "edge89", "firefox89", "safari15"],
  },
  plugins: [
    vue(),
    federation({
      name: "myLib",
      filename: "remoteEntry.js",
      // Modules to expose
      exposes: {
        "./Counter": "./src/components/Counter.vue",
        "./Controller": "./src/controller.ts",
      },
      shared: ["vue", "css"],
    }),
  ],
});

score 1 · Answer 1 · answered Oct 28 '22 at 16:16

1

try add cssCodeSplit:false, for example:

...
build: { 
     target: 'esnext', 
     minify: false, 
     cssCodeSplit: false
   }

answered Oct 28 '22 at 16:16

Rodion Kazennov

23
3

score 1 · Accepted Answer · answered Nov 08 '22 at 20:13

1

-> shared: ["vue", "tailwindcss"]

-> build: { target: 'esnext', minify: false, cssCodeSplit: false }

answered Nov 08 '22 at 20:13

BigMath

26
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 18 '22 at 07:14

vite-plugin-federation doesn't load the styles of my components

2 Answers2