Question

我正在按照一个教程学习React js，并通过我的终端通过create-react-app创建react应用。

将引导程序导入到我的代码中时出现问题，我无法弄清楚。我如何安装引导程序：

npm install bootstrap@4.1.3

App.js代码和导入引导程序：

import React, { Component } from 'react';

import './App.css';
import "bootstrap/dist/css/bootstrap.min.css"


class App extends Component {
  render() {
    return (
      <div className="App">
        <h1 className="alert alert-warning">Welcome</h1>
      </div>
    );
  }
}

export default App;

编译时出现错误：

无法编译。

./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/bootstrap/dist/css/bootstrap.css)
Module not found: Can't resolve 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx'

我尝试的是：安装不同版本的引导程序并将其导入到我的App.js文件中，但是会发生相同的错误。

Answer 1

您正在安装react-bootstrap库，在您的HTML文件中添加CDN链接，并导入https://website.com

中所示的特定组件。

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

反应

import { Button } from 'react-bootstrap';

Answer 2

您需要配置能够加载CSS和其他文件类型。

这在终端对我有用：

纱线添加babel-loader @ babel / core --dev

Answer 3

Silly解决方案，我不确定为什么它有效，但添加babel-loader然后将其删除对我来说有效。

通过运行以下命令添加

yarn add babel-loader @babel/core --dev

然后，使用删除

yarn remove babel-loader @babel/core --dev

Answer 4

yarn add/remove babel-loader @babel/core --dev 有效，不知道为什么？

包、依赖项和锁文件都在纱线删除期间被删除。到目前为止，它是有效的，所以分析如何，将在学习 React 后进行。 ;)

Answer 5

我遇到了同样的问题。对我来说，以下工作有效：

删除package-lock.json
运行npm install
运行npm start

Answer 6

我尝试像上面的答案一样添加 babel 并删除它：添加使用：

yarn add babel-loader @babel/core --dev

使用以下方法删除它：

yarn remove babel-loader @babel/core --dev

如果它不起作用，请尝试在 Index.js 文件中导入引导程序：

import 'bootstrap/dist/css/bootstrap.min.css';

React中的导入引导CSS无法编译

6 个答案: