CSS in content_script is ignored.

[LogicFan]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

if we specify the

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": ["src/content/overlay/style.css"],
            "js": ["src/content/overlay/content.ts"]
        }
    ],

in the mainfest, the css part should be correctly handled by the vite plugin. However, it's compeletely ignored. and path is simply copied with the actual css file missing from the dist folder.

Reproduction

add the "css" section the in the content_scripts and the issue can be reproduced.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U
    Memory: 4.97 GB / 15.83 GB
  Binaries:
    Node: 21.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.21 => 2.0.0-beta.21
    vite: ^5.0.8 => 5.0.10

Severity

annoyance

[gbylenok]

I actually hit this issue too today. I found a work-around within the unit tests: import the css file directly into your content script JS file. CSS will then be automatically copied into the assets folder.

For example, within an assumed content-script.js:

import "./content-script.css";

console.log("inside content script!");

[Kain-90]

I actually hit this issue too today. I found a work-around within the unit tests: import the css file directly into your content script JS file. CSS will then be automatically copied into the assets folder.

For example, within an assumed content-script.js:

import "./content-script.css";

console.log("inside content script!");

meanwhile, you can now remove the "css": ["src/content/overlay/style.css"], it works well.