你需要移动WC-BlackonWhite.jpg到你的src目录。public目录是用于直接链接到HTML中的静态文件(如favicon)，而不是用于直接导入到bundle中的内容。

这是一个相对导入的问题，这可能是因为我们使用了“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。

再加上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>';

有一些答案提供了react-app-rewired的解决方案，但customize-cra包括一个removeModuleScopePlugin() API，它更优雅一些。(这是相同的解决方案，但被customize-cra包抽象了。)

NPM I——save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

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

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