错误：无法解析 React JS 中的“bootstrap.min.css”答案

【问题标题】：Error: Can't resolve 'bootstrap.min.css' in React JS错误：无法解析 React JS 中的“bootstrap.min.css”
【发布时间】：2021-06-16 07:21:49
【问题描述】：

./src/style.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src? ?postcss!./src/style.css) 错误：无法解析 'C:\react\adama\src' 中的 'bootstrap.min.css'

我的 React 项目中不断出现此错误。

package.json

  "name": "adama",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },

App.js

import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css'
import './style.css'
import './responsive.css'

我的 node_modules 目录中有一个引导文件夹。我尝试了各种建议的修复程序，但没有任何效果。请帮忙。

【问题讨论】：

看起来你的 webpack 设置有问题。你能分享你的 webpack 配置吗？您是否使用 create-react-app 创建了应用程序？见docs。
我使用 create-react-app 创建了应用
我认为问题出在 style.css 中的 import 语句上。 @import "bootstrap.min.css"这种导入可以在反应中起作用吗？如果不能，还有什么替代方法？
好点是错误显示styles.css 中的问题。 1）为什么要在 App.js 和 style.css 中都导入引导程序？您只需要导入一次（CRA docs 建议在.js 中导入）。 2) 你可以试试@import "~bootstrap.min.css"。 ~ 将告诉它查看 node_modules。

标签： javascript css reactjs twitter-bootstrap

【解决方案1】：

关于你的 App.js 会不会：

import $ from 'jquery';
import './node_modules/bootstrap/dist/css/bootstrap.min.css'
import './style.css'
import './responsive.css'

【讨论】：