使用react-svg-loader创建React App而不会在尝试缩小时弹出失败

Question

我正在使用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

我能以某种方式修复它而不弹出？

Answer 1

我发现的最佳解决方案是react-app-rewired + react-app-rewire-svg-react-loader。在这个库使用的config-overrides.js内部，您可以访问webpack配置。所以它很容易改变。

我的配置如下所示：

const rewireSvgReactLoader = require('react-app-rewire-svg-react-loader');

module.exports = function override(config, env) {
  return rewireSvgReactLoader(config, env);
};

Answer 2

不是直接但是是的，尝试https://github.com/kitze/custom-react-scripts它是一个反应脚本的分支（驱动创建反应应用程序的配置），但扩展为您添加新功能。

Answer 3

您需要在导入svg的文件顶部禁用eslint

/* eslint import/no-webpack-loader-syntax: off */

Answer 4

我刚切换到@svgr/webpack，它对我来说非常好。

因此，对于您的代码，您必须这样做：

1. 安装@svgr/webpack。 yarn add @svgr/webpack
2. 更改您的出口。 export { default as arrowLeft } from '-!@svgr/webpack!./arrow-left.svg'; export { default as arrowRight } from '-!@svgr/webpack!./arrow-right.svg';
3. 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-app-rewired这样的替代品。