Search code examples
webpacktailwind-cssvitefederation

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

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"],
    }),
  ],
});
Solution

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

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