我正在使用create-react-app构建我的 React 应用程序。我react-svg-loader以这种方式添加和使用它：
export { default as arrowLeft } from '-!react-svg-loader!./arrow-left.svg';
export { default as arrowRight } from '-!react-svg-loader!./arrow-right.svg';
但是当我尝试运行时yarn build- 进程在缩小步骤失败：
正在创建优化的生产版本... 编译失败。
无法缩小此文件中的代码：
./node_modules/react-svg-loader/lib/loader.js!./src/icons/arrow-left.svg:6在此处阅读更多信息：http://bit .ly/2tRViJ9
我可以在不弹出的情况下以某种方式修复它吗？
我发现的最佳解决方案是react-app-rewired + react-app-rewire-svg-react-loader。在config-overrides.js此库使用的Inside 中，您将可以访问 webpack 配置。所以它可以很容易地改变。
我的配置是这样的：
const rewireSvgReactLoader = require('react-app-rewire-svg-react-loader');
module.exports = function override(config, env) {
return rewireSvgReactLoader(config, env);
};
不是直接而是是的，试一试https://github.com/kitze/custom-react-scripts它是 react-scripts（支持 create-react-app 的配置）的一个分支，但扩展为您添加新功能到它。
您需要在导入 svg 的文件顶部禁用 eslint
/* eslint import/no-webpack-loader-syntax: off */
我刚刚切换到@svgr/webpack，它对我来说非常好。
所以对于你的代码，你必须这样做：
安装@svgr/webpack.
yarn add @svgr/webpack
对导出进行更改。
export { default as arrowLeft } from '-!@svgr/webpack!./arrow-left.svg';
export { default as arrowRight } from '-!@svgr/webpack!./arrow-right.svg';
yarn build
我用这个material-design-icons包试过这个。
我的代码如下：
/* eslint-disable import/no-webpack-loader-syntax */
export { default as PlusButton } from '-!@svgr/webpack!material-design-icons/content/svg/production/ic_add_24px.svg';
export { default as MoreButton } from '-!@svgr/webpack!material-design-icons/navigation/svg/production/ic_more_horiz_24px.svg';
export { default as CloseButton } from '-!@svgr/webpack!material-design-icons/navigation/svg/production/ic_close_24px.svg';
对我来说，这需要最少的更改。我仍然在 CRA，既不必对react脚本进行任何更改，也不必将其换成其他替代品之类的react-app-rewired。