Getting postcss-inline-svg to work with Bud

bud
1

I’m using Bud with Sage 10 and the official postcss-inline-svg plugin. Running yarn build produces no error. Problem is it’s not processing the svg-load rules at all.

For example, background-image: svg-load("../../images/arrow-down.svg") remains as is in the compiled css file.

Here’s my bud config file:

module.exports = async (app) => {
  app
  .tap(bud => {
    bud.postcss
      .setPlugins({
        'postcss-inline-svg': [
          require.resolve('postcss-inline-svg'),
          {},
        ]
      });
  })
// other rules
}

I am also not using tailwindcss, meaning I dumped it’s config and removed it from package.json. I’m also not using any other postcss setPlugins configuration or a postcss.config.js file.

I’ve already read this thread regarding postcss-inline-svg, but it hasn’t solved my problem.

My package.json dependencies:

  "devDependencies": {
    "@roots/bud": "5.8.7",
    "@roots/bud-postcss": "^5.8.7",
    "@roots/bud-purgecss": "^5.8.7",
    "@roots/bud-sass": "^5.8.7",
    "@roots/sage": "5.8.7",
    "purgecss-with-wordpress": "^4.1.0"
  },
  "dependencies": {
    "postcss-inline-svg": "^5.0.0"
  }
2

My bad, there was an error I caught regarding the image path. All of my svgs and images are in the same directory, at the same level. Yet my background images using the postcss-inline-svg plugin require them at ../images not ../../images like the rest.

Also, here my bud config with Sage that works:

module.exports = async (app) => {
  app
  .tap(bud => {
    bud.postcss
      .setPlugin('postcss-inline-svg', [
        require.resolve('postcss-inline-svg'),
        {},
      ])
  })
  // other stuff
}
1 Like