winter summit
I'm running svelte with electron. my problem is custom fonts and background image is working on dev mode but doesnt work after building.
my code;
#pg {
text-align: center;
background-image: url('images/bgpattern.png');
padding: 1em;
margin: 0 auto;
}
i'll add details in 3 mins
i tried to do this ```:root {
background-color: #323232;
font-family: Gilroy;
background-image: url('images/bgpattern.png')
}```
from app.scss
i tried to import app.scss from app.html
i guess i need to import app.scss to my main file which is electron.cjs
but i cant, and dont know how to do
(i'm a beginner)
tepid bone
i dont think we able to help you with stelve
tepid bone
but path is definetly wrong
winter summit
hmm, but why is it working with dev mode
tepid bone
you can check in devtools
tepid bone
well such frameworks are differ with dev and prod
quaint willow
I suppose you have some system to resolve paths in prod or something
But I don't know anything about Svelte either
winter summit
lol its pretty weird
i have tens of images in that folder
but it only cant resolve this one
left one is devtools
right one is vs
tepid bone
check paths
quaint willow
Ctrl + R
winter summit
something like electron.restart?
tepid bone
window.location.reload()
tepid bone
window.location.reload()
winter summit
a min
quaint willow
open the network tab before reloading
winter summit
this is not a electron problem
tepid bone
from where app:// comes from?
tepid bone
you have protocol bridge?
winter summit
app://-/_app/immutable/assets/Gilroy-Medium.ttf
winter summit
you have protocol bridge?
yep
winter summit
for anyone wondering with svelte how to fix this
it fixed using '../../static/images/bgpattern.png' instead of '/images/bgpattern.png'
in my opinion this is pretty absurd
i dont know why svelte doesnt do this automatically..
tepid bone
becase stelve dont know it
winter summit
thats 100% sveltes problem, then right?
i found something like this
plugins: [sveltekit()],
resolve: {
alias: {
$img: mode === "production" ? "./static/img" : "../img",
},
},
}));
50/50
winter summit
this can be useful for everyone, i was not able to implement to my code but if anyone needs it
winter summit
ah yeah thats true
tepid bone
web requests and file path handled differently
winter summit
web requests and file path handled differently
and may i ask
why these two files
and not others?
because it uses 'background-image' property in css?
and if i create a div and make it w-full h-full and put a image in it
it will fix the problem
but is it good hing to make?
quaint willow
you use vite?
winter summit
yep
quaint willow
have you configured the base option?
winter summit
not really
quaint willow
You have to set base: "./" for assets to be loaded correctly in prod
quaint willow
On Vite config
tepid bone
and not others?
what others use?
winter summit
they get files from app://-/images/discord.png
but the borken ones gets from app://-/_app/immutable/assets/Gilroy-Medium.ttf
i guess its because css is fetching it
and not a element
it needs to get images from images folder
but it goes to _app
and goes to immutable
assets folder
quaint willow
try to set the base..
tepid bone
probably becase html and css are in different places
quaint willow
If you are deploying your project under a nested public path, simply specify the base config option and all asset paths will be rewritten accordingly. This option can also be specified as a command line flag, e.g. vite build --base=/my/public/path/.
JS-imported asset URLs, CSS url() references, and asset references in your .html files are all automatically adjusted to respect this option during build.
winter summit
yeah, i did that
let me re check because i probably did it wrong
base: "./static/",
winter summit
k, im building with './' rn
quaint willow
unless you use a special folder structure or something, maybe
winter summit
i dont know sctructure of electron
but its prolly a custom
because similar to svelte
ill try both
tepid bone
electron itself have no structure
quaint willow
lol
winter summit
literally
and yeah, if someone reads this thread
you need to put paths: { base: './' }
to svelte config
quaint willow
Did it work?
winter summit
well no
this thing wants to fetch images from app://-/_app/immutable/assets/images/bgpattern.png so bad
what if i get images to this folder?
lmao
quaint willow
Maybe it's a Svelte problem then 🤷♀️
winter summit
100%
now im going svelte support guy to explain my problem from scratch
and just wait
thanks to everyone for helping
@quaint willow sorry for distrubing
but i found out why..
i dont need to change anything
just instead of images/blabla.png
/images/blabla.png
thats it..
winter summit
yeah
