import tailwind in popup html about vite-plugin-chrome-extension HOT 9 OPEN

found the docs said The entries of options and popup pages are HTML files, their outputs are same as nomarl page. link

its not a good solution that can import css as string, an then add to the document

such as I used the element-plus, in your main.ts

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import cssString from 'element-plus/dist/index.css'


const style = document.createElement('style');
document.head.append(style);
style.textContent = cssString;

createApp(App).use(ElementPlus).mount('#app')

from vite-plugin-chrome-extension.

@boka18 sorry, I can't find a solution by using this plugin. Now I change the plugin to this one and it works fine. The developer also provides a template to build extension with vite+vue+manifestV3.

from vite-plugin-chrome-extension.

Hey @Benbinbin, I have the exact same issue. Were you able to resolve it somehow?

from vite-plugin-chrome-extension.

got it @Benbinbin! thank you!

I was also able to create starter template for react (with this plugin)

You can check out the boilerplate here:
https://github.com/boka18/vite-react-chrome-extension-example

It's forked from here:
https://github.com/alvarosaburido/vite-vue-chrome-extension-example
In the above repo, it was built for vue. I managed to port that to react

from vite-plugin-chrome-extension.

same issue

from vite-plugin-chrome-extension.

I have the same problem with windicss import 'virtual:windi.css' in Svelte application popup. Css generates, but not link into HTML correctly

from vite-plugin-chrome-extension.

@reducm Thank you, that's worked for me

from vite-plugin-chrome-extension.

@reducm I'm not using ElementPlus, but after adding the other parts of your solution I'm still not getting Tailwind imported. When I inspect the popup DOM I don't see the <style> element. Is ElementPlus adding some functionality for this to work for you?

from vite-plugin-chrome-extension.

@reducm I'm not using ElementPlus, but after adding the other parts of your solution I'm still not getting Tailwind imported. When I inspect the popup DOM I don't see the <style> element. Is ElementPlus adding some functionality for this to work for you?

to my knowledge, the elementPlus css is just some css string, and I found it did add en style tag to the document head

i think maybe some js code overwrite it, you code just use this code(remove other import) to see is there a style tag in head

import cssString from 'someCss'


const style = document.createElement('style');
document.head.append(style);
style.textContent = cssString;

from vite-plugin-chrome-extension.