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

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

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

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

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

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

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

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

在制作《Truffle》时，我不得不克服同样的问题。解决方案如下:

由于Create-React-App的默认行为不允许从src文件夹外导入文件，我们需要将build文件夹中的合同带到src内。我们可以在每次编译合同时复制并粘贴它们，但更好的方法是简单地配置Truffle将文件放在那里。

在“truffle-config.js”文件中，替换如下内容:

const path = require("path");

module.exports = {
  contracts_build_directory: path.join(__dirname, "client/src/contracts")
};

我不知道这是否对你有帮助，但我知道当我在Truffle中遇到同样的问题时，我发现了你的问题，这可能会帮助其他人。

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，但保留其余部分，并消除了弹出的必要性。

这是一个相对导入的问题，这可能是因为我们使用了“create-react-app project”命令，该命令形成了一个名为project的目录，其中包含node_modules文件夹和其中的public和src文件夹中的其他几个文件。 create-react-app命令设置了一个限制，我们不能从src外部导入任何东西。

我的问题:

我必须导入在src文件夹外的node_modules文件夹中创建的react-bootstrap css文件。 我使用导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”;但是我在终端上得到了错误。 我发现我可以创建一个新的react应用程序，并遵循从a到G的解决步骤，以解决这个问题。

解决方案: A)创建一个新的react应用，使用Create -react-app new

B) cd new

C)运行以下命令:"npm install react-bootstrap bootstrap@4.6.0"(不带""双引号)

D)在你的react文件中导入bootstrap: D.1)导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”; 或 D.2)从“react-bootstrap/Button”导入按钮;

E)在你的react文件中创建一个类似Button或任何东西的引导元素，用于D.1) < Button className="btn btn-success" >引导< / Button > 或 2) <按钮变量="primary"> Bootstrap < /按钮>

F)在终端:cd src

G)在终端:npm启动，

这一次它将被成功编译。

推理: 当我按顺序执行步骤A到G时，我可以看到react-bootstrap终于开始工作了，这一次我没有得到任何错误。 (我想到这个解决方案是因为:

我已经使用npm安装“@material-ui/icons”，它被安装在src之外的node_modules文件夹中。 在我的react文件中，我使用了import Add from“@material-ui/icons/Add” 材质界面图标对我来说工作得很好， 但这里我们也从src外部导入，从node_modules..一切都很正常。为什么这次从src外部导入没有错误) 这就是为什么我刚刚创建了一个新的react应用程序，并遵循解决方案步骤a到G。

公共文件夹内的图像

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

使用图像在js扩展

如果你需要多次修改，比如使用蚂蚁设计，你可以像这样组合多个功能:

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);