Build fails when using a dynamic css import

[SethBurkart123]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

For some reason, when I use the dynamic import for my scss file import('./css/injected.scss') it loads beautifully when I run the dev script, but on build it fails. I know this isn't isolated to my machine as the same error was experienced by the github CI/CD actions I have setup.

Reproduction

In order to reproduce, you can clone my chrome extension: https://github.com/BetterSEQTA/BetterSEQTA-Plus
Then git checkout 6289bcec to go to the commit where it's broken. The main file is SEQTA.ts in src, on line 67 it imports the scss file. This problem is still present when converting over and only importing a regular css file...

Logs

error during build:
[crx:manifest-post] ENOENT: Could not load manifest asset "assets/injected-6MwNy5sn.js".
Manifest assets must exist in one of these directories:
Project root: "/Users/me/Documents/Coding/betterseqta-plus"
Public dir: "/Users/me/Documents/Coding/betterseqta-plus/public"
    at file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/@crxjs/vite-plugin/dist/index.mjs:1697:23
    at Array.map (<anonymous>)
    at Object.generateBundle (file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/@crxjs/vite-plugin/dist/index.mjs:1691:50)
    at async Bundle.generate (file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18153:9)
    at async file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:20692:27
    at async catchUnfinishedHookActions (file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:20119:16)
    at async build (file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:68740:22)
    at async CAC.<anonymous> (file:///Users/me/Documents/Coding/betterseqta-plus/node_modules/vite/dist/node/cli.js:842:9)
error: script "build" exited with code 1

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M2
    Memory: 119.27 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.2.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm
    bun: 1.1.12 - ~/.bun/bin/bun
  Browsers:
    Safari: 17.5
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.23 => 2.0.0-beta.23 
    vite: ^5.2.2 => 5.2.13

Severity

annoyance

[liyasthomas]

Same issue, any fix available?

[pnd280]

this is a workaround, use ?inline instead of ?raw if you're using tailwind.

import cssFile from "@/assets/cs.css?raw";

const style = document.createElement("style");
style.textContent = cssFile;
document.head.append(style);

[github-actions]

Thanks for contributing to CRXJS! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within 7 days.

[SethBurkart123]

this is a workaround, use ?inline instead of ?raw if you're using tailwind.

import cssFile from "@/assets/cs.css?raw";

const style = document.createElement("style");
style.textContent = cssFile;
document.head.append(style);

Yes, that is the current solution I'm using, however, you don't get hot reloading with css then. My current solution was just to add an if statement checking whether it was in dev mode and applying it accordingly.

[github-actions]

⚠️ Important Notice: CRXJS is seeking new maintainers.

• New issues and PRs may not receive immediate attention
• A new maintenance team must establish itself by March 31, 2025 or this repository will be archived on June 1, 2025
• Learn more about the transition

---

This is an automated message. Please do not reply to this comment.