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

Question

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

将引导程序导入我的代码时出现问题，我无法弄清楚。我安装引导程序的方式是：

npm install bootstrap@4.1.3

App.js 代码和导入 bootstrap ：

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

您需要配置加载 CSS 和其他文件类型。这在终端对我有用：

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