search

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.75k stars 182 forks source link

SCSS import in HTML works with build but dev HMR #422

Open emircanerkul opened 2 years ago

emircanerkul commented 2 years ago

Build tool

Vite

Where do you see the problem?

Describe the bug

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./main.scss">
</head>

I'm using this code to compile scss file. It works perfectly when I run build command. But this feature does not work in the npm dev

Reproduction

Create a basic extension. Add scss into the head.

Logs

There is no error.

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 156.69 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Edge: 100.0.1185.29
    Firefox: 98.0.2
    Safari: 15.4
  npmPackages:
    @crxjs/vite-plugin: ^1.0.11 => 1.0.11 
    vite: ^2.9.9 => 2.9.9

Severity

annoyance

jacksteamdev commented 2 years ago

@emircanerkul Could you link to a GitHub repo with a minimum reproduction? Thanks 🙏

emircanerkul commented 2 years ago

@jacksteamdev Sure,

Here: https://github.com/emircanerkul/chrome-extension-tools/tree/main/issue/422

Thanks,

jacksteamdev commented 2 years ago

@emircanerkul Awesome, thanks!

nonua commented 2 years ago

I noticed that as well about a week ago, wanted to implement the plugin with a typical Svelte project, I did not think it was a bug of some sort, just a limitation of Vite. I just imported the scss in code and works now https://github.com/Nonua/chrome-vite-svelte-ts-sass-boilerplate/blob/master/src/popup/index.ts

emircanerkul commented 2 years ago

@Nonua I know within js scss injection works well but I want to put this in the head due to speed up. Otherwise, CSS does not load earlier. Also, I don't want to put all my js in the head because it will block First Contentful Paint

emircanerkul commented 2 years ago

Also, this problem wasn't there when I work without crxjs. I think this might caused by HMR

emircanerkul commented 2 years ago

@pierreneter I know this way works perfectly but I want to separate CSS and js. Otherwise, if I did like you said it will compile as one file and that blocks First Contentful Paint due to my script being really huge.

emircanerkul commented 2 years ago

@pierreneter I tried but it included all CSS into the js file as I remember. Also, I want to put it in head tags. Is that possible?

emircanerkul commented 2 years ago

You can use this repo: https://github.com/emircanerkul/chrome-extension-tools/tree/main/issue/422

It just does not work scss import within HTML tag when on HMR mode

emircanerkul commented 2 years ago

@pierreneter might be you're right but this only happens when building with vite. NOT when using vite dev which is what i said from the beginning.

emircanerkul commented 2 years ago

But without crxjs vite works perfect and compile in head scss perfectly