Roots Discourse

Sage 9 & SVG's not found with build:production

Hi guy’s,

I am trying to implement a spritemap function with Sage 9. I’ve included the following webpack plugin:

SVG Spritemap webpack plugin

with the following code:

new SVGSpritemapPlugin({
src: path.join(config.paths.assets, “/images/svg/*.svg”),
filename: images/svg/spritemap.svg,
}),

The spritemap is generated while using yarn start, but when using yarn build the sprite map is empty. It looks like it can’t find the separate SVG files. Any idea how to fix this?

Thanks in advance,

Thanks for your help Daniel. It actually works with yarn run build, but not with yarn run build:production.

The path.join error was because of the use of unnecessary Path (const path = require(‘path’);),

It looks like it has something to do with the ImageminPlugin. Removing it entirely fixes the spritemap, but of course skips the minification of the other images. Does the plugin move or copies the images or something?

Mhm, this work for me.
Try removing node_modules and run yarn again.

I get the sprite but it’s not processed by svgo as far I can see because I can see titles still there even I set them to exclude.

Adding null to svgo at ImageminPlugin in webpack.config.optimize fixes the issue:

new ImageminPlugin({
      optipng: { optimizationLevel: 7 },
      gifsicle: { optimizationLevel: 3 },
      pngquant: { quality: '65-90', speed: 4 },
      svgo: null,
      plugins: [imageminMozjpeg({ quality: 75 })],
      disable: (config.enabled.watcher),
    }),
1 Like

Not for me…

I wished you would share your final code.

@simplenotezy & anyone else have a similar problem.

It’s because of the relative linking of the SVG in the stylesheet use two dots “.” instead of one or none

Correct
.something {
background: url(’…/images/curve-bottom.svg’) no-repeat center / cover;
}

Incorrect
.something {
background: url(’./images/curve-bottom.svg’) no-repeat center / cover;
}