如果您只需要导入单个文件，如README。Md或package。json，那么它可以显式地添加到ModuleScopePlugin()

配置/ paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

Config /webpack.config.dev.js + Config /webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

这是create-react-app开发者添加的特殊限制。它在ModuleScopePlugin中实现，以确保文件驻留在src/中。该插件确保从应用程序的源目录导入的相对文件不会到达应用程序的外部。

除了使用eject和修改webpack配置，没有任何官方方法可以禁用此功能。

但是，大多数功能及其更新都隐藏在创建-反应-应用程序系统的内部。如果你让弹出你将没有更多的新功能和它的更新。因此，如果你还没有准备好管理和配置应用程序，包括配置webpack等-不要做弹出操作。

发挥现有的规则-移动资产到src或使用基于公共文件夹url没有导入。

然而，有许多非官方的解决方案，而不是驱逐 Rewire允许你以编程方式修改webpack配置而不弹出。但是删除ModuleScopePlugin插件并不好——这失去了一些保护，并且没有添加src中可用的一些特性。ModuleScopePlugin被设计为支持多个文件夹。

更好的方法是添加完全工作的附加目录，类似于src，也受ModuleScopePlugin保护。这可以使用react-app-alias来完成

无论如何，不要从公共文件夹导入-这将在构建文件夹中复制，并将通过两个不同的url(和不同的加载方式)可用，这最终会恶化包的下载大小。

从src文件夹导入是更可取的，它有很多优点。所有东西都将通过webpack打包到包中，以块的最佳大小和最佳的加载效率。

因此，显然，使用Create-react-app将限制你访问项目根目录以外的图像——通常是src。

解决这个问题的一个快速方法是将图像从public文件夹移动到src文件夹，这样就可以了。 所以你的代码应该是这样的:

background-image: URL('/src/images/img-2.jpg');

再加上Bartek Maciejiczek的回答，下面是Craco的情况:

const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");

module.exports = {
  webpack: {
    configure: webpackConfig => {
      webpackConfig.resolve.plugins.forEach(plugin => {
        if (plugin instanceof ModuleScopePlugin) {
          plugin.allowedFiles.add(path.resolve("./config.json"));
        }
      });
      return webpackConfig;
    }
  }
};

我之前的解决方案适用于Webpack 4，但不适用于Webpack 5。在浏览了从那时起积累的解决方法之后，我发现下面的方法非常简单(而且似乎是可扩展的)。

import { CracoAliasPlugin } from 'react-app-alias';

const cracoConfig = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {
        alias: { '~': './' },
      },
    },
  ],
}

然后像这样导入:

import whatever from '~/<path-to-file>';

最好的解决方案是fork react-scripts，这实际上在官方文档中提到过，参见:ejection的替代方案

react-app-rewired包可以用来删除插件。这样你就不用弹射了。

按照npm包页面上的步骤(安装包并翻转包中的调用)。Json文件)，并使用类似于这个的config-override .js文件:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

这将从使用的WebPack插件中删除ModuleScopePlugin，但保留其余部分，并消除了弹出的必要性。