无法配置 svgo-loader (webpack)

Question

我正在使用 svgo-loader 来优化 svg 图像，并为此使用默认配置。我想添加一些自定义配置，比如我不想从svg 中删除viewBox，因为它使得定义svg 的尺寸非常困难。

我从互联网上找到了以下解决方案...但它们都不起作用，而且我总是从 svg 中删除 viewBox。

          {
            loader: 'svgo-loader',
            options: {
              plugins: [{
                removeViewBox: false
              }]
            }
        }

          {
            loader: 'svgo-loader',
            options: {
              externalConfig: "svgo-config.yml"
            }
          }

         {
            loader: 'svgo-loader',
            options: {
              configFile: './svgo.config.js'
            }
          }

config.yml 文件内容

plugins:
  - removeTitle: false
  - remoViewBox: false

svgo.config.js 的内容

const { extendDefaultPlugins } = require('svgo');
module.exports = {
  plugins: extendDefaultPlugins([
    {
      name: 'removeTitle',
      active: false
    },
    {
      name: 'removeViewBox',
      active: false
    },
  ])
};

对于 configFile 解决方案，我觉得它只是没有选择给定的文件，因为如果我提供错误的文件位置（或某些不存在的文件位置），它的工作方式与默认情况完全相同（我的期望是有一个错误，比如...提供了错误的文件）。

Answer 1

使用 svgo-loader v3.0.0（使用 svgo v2.4.0 或更新版本）：

在根项目文件夹中创建svgo.config.js，内容如下：

module.exports = {
    plugins: [
        {
            name: 'preset-default',
            params: {
                overrides: {
                    removeViewBox: false,
                },
            },
        },
    ],
};

在 webpack.config.js 中

{
    test: /\.svg$/i,
    use: [
        {
            loader: 'file-loader',
        },
        {
            loader: 'svgo-loader',
        },
    ]
},

Answer 2

无需在 webpack 配置中为 svgo-loader 传递任何选项。只需将根目录下的默认配置与微调加载程序所需的选项一起传递给我。 确保将其命名为svgo.config.js，因为这是将由svgo 选择的用于加载选项的文件......就像我们为其他东西（如 prettier、ts 等）传递配置文件的方式一样。

webpack.config.js

   {
        test: /\.svg$/i,
        use: [
          {
            loader: 'file-loader',
          },
          {
            loader: 'svgo-loader',
          },
        ]
      },

这是我的svgo.config.js，因为我只需要在我的 SVG 上保留viewBox 属性，我已经添加了...您可以使用此complete list 来作为参考。

  const { extendDefaultPlugins } = require('svgo');

  module.exports = {
  plugins: extendDefaultPlugins([
    {
      name: 'removeViewBox',
      active: false
    },
  ])
};

感谢@trySound的帮助！