Content css not working in build production

[Applicafroguy]

Good day,

My project:

• Vue 3
• Content
• Popup
• Typescript
• Tailwindcss

I have an /src/index.css with the following

@tailwind base;
@tailwind components;
@tailwind utilities;

and in /entry/content.ts and /entry/popup.ts I import '@/index.css'

When I run yarn build-watch works fine, tailwindcss works with no issues for content and popup.
yarn build-watch does not generate CSS files, they are included inside js files, but yarn build generates CSS files

Problem

But when I run yarn build only popup works.

in the dist folder /dist/popup.html is referenced to <link href="/css/popup.css" rel="stylesheet"> and /dist/content.html is referenced to <link href="/css/content.css" rel="stylesheet"> in their head.

Solution

My solution was to add /css/content.css to the manifest.production.json in content_scripts. since no CSS is generated for yarn build-watch don't add them in manifest.development.json

  "content_scripts": [
    {
      "matches": ["*://*.somewebsite.com/*"],
      "js": ["/js/content.js"],
      "css": ["/css/content.css"], 
      "run_at": "document_end"
    }
  ]

[sanyu1225]

@Applicafroguy
new version is publish , now you can try it 🎉

[namsir]

It doesn't work for me either.