StarkShang / vite-plugin-chrome-extension

A vite plugin to bundle chrome extensions for Manifest V3.
MIT License
467 stars 68 forks source link

Styles are not loaded in the Svelte example. #7

Open michal-damiecki opened 3 years ago

michal-damiecki commented 3 years ago

In the Svelte example, App.svelte contains some styling, for example, button styles and so on. Unfortunately, after running build and loading extension, it works fine but it doesn't load styles.

Svelte-extension

As far as I can see styles are not included in the /dist/popup/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="../assets/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svelte + TS + Vite App</title>
</head>

<body style="min-width:200px;">
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
</body>

</html>
salimldt commented 3 years ago

Same problem

francochau commented 3 years ago

will the css problem be fixed?

korzhanov commented 3 years ago

During development, you can temporarily enable cssCodeSplit parameter in the vite.config.js

build: {
    cssCodeSplit: true
    ...
}

https://vitejs.dev/config/#build-csscodesplit Your css will be rendered inside js

hubingliang commented 3 years ago

image

I tried this configuration and it worked for me !

export default defineConfig({
    plugins: [
        svelte({
          emitCss: false
        }),
       ...
    ]
});