升级到最新的 Gatsby 后，Sass base64 背景图片在生产版本中不可用

问题描述

我有下一个代码的 *.scss 文件

button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik04Ljc1IDE3LjYxMjNWMjIuMjUwM0M4Ljc1IDIyLjU3NDMgOC45NTggMjIuODYxMyA5LjI2NiAyMi45NjMzQzkuMzQzIDIyLjk4ODMgOS40MjIgMjMuMDAwMyA5LjUgMjMuMDAwM0M5LjczNCAyMy4wMDAzIDkuOTYgMjIuODkwMyAxMC4xMDQgMjIuNjk0M0wxMi44MTcgMTkuMDAyM0w4Ljc1IDE3LjYxMjNaIiBmaWxsPSIjMzY3MkY4Ii8+CjxwYXRoIGQ9Ik0yMy42ODQ5IDAuMTM5MDg5QzIzLjQ1NDkgLTAuMDIzOTExNCAyMy4xNTI5IC0wLjA0NTkxMTQgMjIuOTAyOSAwLjA4NTA4ODZMMC40MDI5MjIgMTEuODM1MUMwLjEzNjkyMiAxMS45NzQxIC0wLjAyMDA3NzYgMTIuMjU4MSAwLjAwMTkyMjQxIDEyLjU1NzFDMC4wMjQ5MjI0IDEyLjg1NzEgMC4yMjM5MjIgMTMuMTEzMSAwLjUwNjkyMiAxMy4yMTAxTDYuNzYxOTIgMTUuMzQ4MUwyMC4wODI5IDMuOTU4MDlMOS43NzQ5MiAxNi4zNzcxTDIwLjI1NzkgMTkuOTYwMUMyMC4zMzU5IDE5Ljk4NjEgMjAuNDE3OSAyMC4wMDAxIDIwLjQ5OTkgMjAuMDAwMUMyMC42MzU5IDIwLjAwMDEgMjAuNzcwOSAxOS45NjMxIDIwLjg4OTkgMTkuODkxMUMyMS4wNzk5IDE5Ljc3NTEgMjEuMjA4OSAxOS41ODAxIDIxLjI0MTkgMTkuMzYxMUwyMy45OTE5IDAuODYxMDg5QzI0LjAzMjkgMC41ODEwODkgMjMuOTE0OSAwLjMwMzA4OSAyMy42ODQ5IDAuMTM5MDg5WiIgZmlsbD0iIzM2NzJGOCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
}

这是一个已经是 base64 格式的正确图像。

但是在我构建项目并使用 gatsby serve 为其提供服务后，相同的图像被遗漏（编码），并且在检查器中我看到了下一个代码。

button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgOCAxNCI+PHBhdGggZmlsbD0iIzIxMkM0RiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjI5MyAxLjcwNyA1LjU4NiA3IC4yOTMgMTIuMjkzYTEgMSAwIDEgMCAxLjQxNCAxLjQxNGw2LTZhMSAxIDAgMCAwIDAtMS40MTVsLTYtNkExIDEgMCAwIDAgLjI5MyAxLjcwOHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}

我应该以某种方式调整插件，还是我遗漏了什么？

更新：那是因为 gatsby 3.7-3.8 中的 svgo 插件。对于临时或永久修复 :) 使用 gatsby-node.js

中的下一个代码

// TODO: temporary workaround for https://github.com/gatsbyjs/gatsby/issues/31878
exports.onCreateWebpackConfig = ({ actions,plugins,stage,getConfig }) => {
  // override config only during production JS & CSS build
  if (stage === 'build-javascript') {
    // get current webpack config
    const config = getConfig();

    const options = {
      minimizerOptions: {
        preset: [
          `default`,{
            svgo: {
              full: true,plugins: [
                // potentially destructive plugins removed - see https://github.com/gatsbyjs/gatsby/issues/15629
                // use correct config format and remove plugins requiring specific params - see https://github.com/gatsbyjs/gatsby/issues/31619
                `removeUselessDefs`,`cleanupAttrs`,`cleanupEnableBackground`,`cleanupIDs`,`cleanupListOfValues`,`cleanupNumericValues`,`collapseGroups`,`convertColors`,`convertPathData`,`convertStyleToAttrs`,`convertTransform`,`inlineStyles`,`mergePaths`,`minifyStyles`,`moveElemsAttrsToGroup`,`moveGroupAttrsToElems`,`prefixIds`,`removeAttrs`,`removeComments`,`removeDesc`,// `removeDimensions`,`removeDoctype`,`removeEditorsNSData`,`removeEmptyAttrs`,`removeEmptyContainers`,`removeEmptyText`,`removeHiddenElems`,`removeMetadata`,`removeNonInheritableGroupAttrs`,`removeOffCanvasPaths`,`removeRasterImages`,`removeScriptElement`,`removeStyleElement`,`removeTitle`,`removeUnknownsAndDefaults`,`removeUnusedNS`,`removeUselessStrokeAndFill`,// 'removeXMLNS',`removeXMLProcInst`,`reusePaths`,`sortAttrs`,],},}
    }
    // find CSS minimizer
    const minifyCssIndex = config.optimization.minimizer.findIndex(
      minimizer => minimizer.constructor.name ===
        'CssMinimizerPlugin'
    );
    // if found,overwrite existing CSS minimizer with the new one
    if (minifyCssIndex > -1) {
      config.optimization.minimizer[minifyCssIndex] =
        plugins.minifyCss(options);
    }
    // replace webpack config with the modified object
    actions.replaceWebpackConfig(config);
  }
};

解决方法

此问题已在 gatsby 3.8.1 中修复，要修复它，您可以更新到最新版本，如果 gatsby：

npm install gatsby@latest

更多信息请访问： https://github.com/gatsbyjs/gatsby/pull/32123