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.

e class='quote' data-post="5" data-topic="21864">
How to add PostCSS plugins to Bud? bud
nice! thank you for the repo. i was able to reproduce your issue and i have a fix. allow me to walk you through the steps i took. Check .budfiles/bud/webpack.config.js If bud made it all the way to the dashboard it means bud has created a diagnostic file at this location. The file has a representation of the configuration bud is giving to webpack. The first example When you set your plugin with setPlugin in the first example: .tap(bud => { bud.postcss .setPlugin('postcss-inline-svg', …

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