修改node_modules内webpack.config.js无效，需配置svgo保留SVG的id标签

直接修改node_modules/react-scripts里的Webpack配置不生效，一是因为依赖更新会覆盖修改，二是Create React App的缓存机制可能没触发重新构建。另外你贴出的代码块是Babel相关配置，并非处理SVG的规则，得找对对应配置位置。下面提供两种可行方案：

方案一：不执行eject（推荐） #

用react-app-rewired和customize-cra覆盖默认配置，无需暴露项目核心配置文件：

1. 安装依赖

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录新建config-overrides.js文件，写入以下内容：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /\.svg$/,
    use: [
      {
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [
              {
                name: 'preset-default',
                params: {
                  overrides: {
                    removeIds: false, // 关闭删除ID的SVGO插件
                  },
                },
              },
            ],
          },
        },
      },
      'file-loader',
    ],
  })
);

3. 修改package.json中的scripts命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重启开发服务器，导入的SVG即可保留ID标签。

方案二：执行eject后修改配置 #

若可接受暴露核心配置文件，执行以下步骤：

1. 执行eject命令（操作不可逆）：

npm run eject

2. 在项目根目录的config/webpack.config.js中找到处理SVG的规则，结构大致如下：

{
  test: /\.svg$/,
  use: [
    {
      loader: require.resolve('@svgr/webpack'),
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {
          plugins: [{ removeViewBox: false }],
        },
        titleProp: true,
      },
    },
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'static/media/[name].[hash].[ext]',
      },
    },
  ],
  issuer: {
    and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
  },
}

3. 修改svgoConfig部分，添加关闭removeIds的配置：

svgoConfig: {
  plugins: [
    { removeViewBox: false },
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeIds: false,
        },
      },
    },
  ],
}

4. 重启开发服务器即可生效。

内容的提问来源于stack exchange，提问作者Janne Sopanen