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这是一个反应脚本的分支（为create-react-app提供支持的配置），但会扩展为您添加新功能。

Answer 3

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

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

Answer 4

我刚刚切换到@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-app-rewired之类的东西。

Answer 5

对于现在搜索此内容的任何人，他们在 2.0.0 中添加了对此的支持，请参阅 https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

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

5 个答案: