CSS

WXT can build CSS entrypoints individually. CSS entrypoints are always unlisted.

See Content Script CSS documentation for the recommended approach to include CSS with a content script.

INFO

If the recommended approach doesn't work for your use case, you can use any of the filename patterns below to build the styles separate from the JS and use the transformManifest hook to manually add your CSS file to the manifest.

Filenames

Input Pattern		Output Path
entrypoints/<name>.(css|scss|sass|less|styl|stylus)		/<name>.css
entrypoints/<name>/index.(css|scss|sass|less|styl|stylus)		/<name>.css
entrypoints/content.(css|scss|sass|less|styl|stylus)		/content-scripts/content.css
entrypoints/content/index.(css|scss|sass|less|styl|stylus)		/content-scripts/content.css
entrypoints/<name>.content.(css|scss|sass|less|styl|stylus)		/content-scripts/<name>.css
entrypoints/<name>.content/index.(css|scss|sass|less|styl|stylus)		/content-scripts/<name>.css

Definition

body {
  /* Plain CSS file */
}

Follow Vite's guide to setup a preprocessor: https://vitejs.dev/guide/features.html#css-pre-processors

pnpm i sass

body {
  h1 {
    /* ...*/
  }
}