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

Question

我有 *.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);
  }
};

Answer 1

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

npm install gatsby@latest

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

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

After upgrade to the latest Gatsby, Sass base64 background images are not available in production build

node-sass

webpack

css-loader

gatsby