Skip to main content



One quirk of Vite's manifest system is that it does not directly generate a manifest for CSS assets. To get around this the CTFd developers created a Vite plugin (vite-manifest-css) which will create a seperate manifest specifically for CSS files called manifest-css.json.

This can be used by importing CSSManifestPlugin and then including it as a Vite plugin as shown in the following Vite config example:

const { resolve } = require("path");
import { defineConfig } from "vite";
import { CSSManifestPlugin } from "vite-manifest-css";

export default defineConfig({
plugins: [CSSManifestPlugin()],
build: {
manifest: true,
outDir: "static",
rollupOptions: {
input: {
index: resolve(__dirname, "assets/js/index.js"),
main: resolve(__dirname, "assets/scss/main.scss"),

A generated example of manifest-css.json would be:

"main.css": {
"file": "assets/main.b16debf0.css"


CTFd provides a helper to automatically include CSS files based on a key in manifest-css.json.

Using the previous manifest-css.json example, if a template includes {{ Assets.css("main.css") }}, CTFd will generate something like:

<link rel="stylesheet" href="/themes/core/static/assets/main.b16debf0.css" />