Search code examples
cssvuejs3assetsviterollup

Vite Vue3 - Keep unused CSS for Themes in Build

i have a dynamic theme switcher on my site. The themes are in different css files in "src/asssets/themes/[theme-name]/theme.css"

when i build the project, the theme.css files get not copied to the "dist/assets/" folder.

i tried to extend the rollup build options in vite.config.js `

build: {
  rollupOptions: {
    output: {
      assetFileNames: ({ name }) => {
        if (name === "theme.css") {
          return "assets/themes/[name][extname]";
        }
        // default value
        // ref: https://rollupjs.org/guide/en/#outputassetfilenames
        return "assets/[name]-[hash][extname]";
      },
    },
  },
},

` but since the different themes are not used by default they never get to this resolver.

How can i extend the build options to include the whole assets/themes folder into my "dist/assets"

Solution

  • i copied the files to "public/" which auto. includes them into the build.