Hey!
I have strange problem while trying to put svgs in SCSS. What I’m doing:
background-image: url(../../images/example.svg);
//or
background-image: url(~@images/example.svg);
What I’m getting in output CSS:
background-image: url(images/example.ee4a91/.svg);
As you can see there’s some unnecessary slash.
I don’t have this problem with jpgs and pngs.
Any ideas?
2 Likes
I’ve just encountered the same issue, using the latest Sage 10.
You can add me to the list of people with this issue. It looks like the image is being processed twice:
bud … images/nav-bg.svg cached ✘ min 6.48 kB
bud … images/nav-bg/.svg cached ✘ min 6.48 kB
And it doesn’t work on the site, because it’s looking for a directory named nav-bg
and a file named .svg
.
Just for giggles I tried both dev and build and both result in the same outcome.
Also when building it does generate both as shown by Bud (with and without slash), but it’s looking for the second incorrect version instead of the first.
kukac7
February 9, 2022, 9:12pm
5
unfortunately i have the same problem.
works well with jpg/png file.
kevvs
February 10, 2022, 10:36am
6
Update to Bud 5.3.1 and update bud.config.js as below
module.exports = (app) =>
app
.entry({
app: '**/app.{js,scss}',
editor: '**/editor.{js,scss}'
})
.alias({
'@fonts': app.path('src', 'fonts'),
'@images': app.path('src', 'images'),
'@scripts': app.path('src', 'scripts'),
'@styles': app.path('src', 'styles'),
})
.copy([app.path('src', 'images/**/*')])
.watch(['resources/styles/**/*.scss', 'resources/views/*.blade.php'])
.serve('http://example.test:3000')
.proxy('http://example.test')
1 Like
Sorry I didn’t respond sooner, everyone. This issue is fixed in 5.3.0 and shouldn’t require further workarounds.
2 Likes
kukac7
February 11, 2022, 10:13am
8
so i have 404 images in the template now.
<img src="@asset('/images/logo.svg')">
bud.config.js: https://github.com/roots/sage/blob/main/bud.config.js
update: @asset('/assets/images/logo.svg')
works.
update2: build after again the pictures 404.
update3:
for build this is good: @asset('/images/logo.svg')
for dev this is good: @asset('/assets/images/logo.svg')
1 Like
Any additional problems were fixed in the Acorn 2 release (by https://github.com/roots/acorn/pull/190 ).
2 Likes