-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HMR not working with imported CSS (Module) files #10905
Comments
I'm also encountering this issue with standard css fiels. We (unfortunately) have to edit global css files in our SvelteKit project and the full reloads are a killer. It appears as if SvelteKit hot reloads first, and then follows with a full reload. Is that expected behavior? |
I got the same issue as you @john-michael-murphy I import my global css in my +layout.svelte file and whenever I make change to the css the page reload. I expect svelte+kit+vite to be able to handle hot reload by swapping css |
We have this problem as we use a global I monkey patched kit, this line: https://github.com/sveltejs/kit/blob/@sveltejs/[email protected]/packages/kit/src/exports/vite/dev/index.js#L205 - !(query.has('raw') || query.has('url') || query.has('inline'))
+ !(query.has('raw') || query.has('url') || query.has('inline') || query.has('noinline')) and then in my +layout.svelte, the following change: - import "../scss/app.scss";
+ import "../scss/app.scss?noinline"; TL;DR: I made sveltekit ignore inlining the css when that particular search param Seems to be working well. |
Thanks @ekhaled ! Is that something we should merge in somehow ? |
Feel free to create a PR. @dummdidumm do you think this is something that might get accepted into core? I'm sure a lot of people use global css with sveltekit. And this does increase productivity a lot when building site templates etc. |
Wow this is sooooo cool!! Still working with No PR yet? I am not familiar with the Svelte/Kit codebase, so I would be afraid to (move fast and) break things in unexected ways, but I'm very excited to see it seems to be just around the corner! |
There is this library called patch-package which can be used to to automate the patching on Your would end up with something like this structure: I'm also including the patch file, I'm sure it will help. |
Awesome thanks! I was trying to setup something similar! :) |
Just found out about
$ pnpm patch @sveltejs/kit
Patch: You can now edit the package at:
/tmp/e86e895e5b7d2b3e21ca36d5c57bdc19
To commit your changes, run:
pnpm patch-commit '/tmp/e86e895e5b7d2b3e21ca36d5c57bdc19'
$ pnpm patch-commit '/tmp/e86e895e5b7d2b3e21ca36d5c57bdc19' This gets added to {
"...": "...",
"pnpm": {
"patchedDependencies": {
"@sveltejs/[email protected]": "patches/@[email protected]"
}
}
} IDK yet about maintenance and updates but it look great for now! Edit : Ok, Edit 2 : Ok, I read the thread to the end, and they just released |
Describe the bug
Editing CSS Module files that are imported in
.svelte
components causes a full page reload, while hot-reloading is expected (and demonstrably possible, but more on that in the "Additional information" section).Before somebody asks "why aren't you using the
<style>
tag directly in your Svelte components and taking advantage of Svelte's built-in CSS scoping?", because they are not good enough, and I'm not alone in thinking that.Reproduction
pnpm install
pnpm run dev
src/lib/Button.module.css
file, and change thebackground-color
toblue
.Logs
No response
System Info
Severity
annoyance
Additional Information
<script>
section of your root+layout.svelte
file (or, in the repro app linked above, it could be in the+page.svelte
file):Button.module.css
file again (change thebackground-color
back tored
), and save the file.Uncaught (in promise) (skipping full reload)
, as expected; the full page reload is prevented.Button.svelte
file, and then save the file.Let me know. Thanks.
The text was updated successfully, but these errors were encountered: