Sage 10 - slash before .svg extension in CSS

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.

unfortunately i have the same problem.
works well with jpg/png file.

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

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