为什么CSS不在我的React电子应用程序中加载？

Question

我已经建立了一个电子应用程序，使用electron-react-boilerplate包进行反应，然后用npm导入react-bootstrap库。

我编辑了默认的App.tsx内容，以测试引导组件。以下是代码：

import { Alert, Col, Container, Row } from 'react-bootstrap';
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';

const Hello = () => {

  console.log('hello there')
  return (
    <Container>
      <Row>
        <Alert variant={'primary'}>
          This is a alert, check it out!
        </Alert>
      </Row>
      <Row>
        <Col xs={2}>My First Column</Col>
        <Col xs={5}>My Second Xolumn!</Col>
        <Col xs={5}>My Last Column </Col>
      </Row>
    </Container>
  );
};

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

这就是我的应用程序运行时的样子。正如您可以看到的，内容在那里，但没有一个引导CSS正在加载。

​

​

Answer 1

您需要同时安装bootstrap和react-bootstrap

npm install react-bootstrap bootstrap@5.1.3

然后在bootstrap.min.css中导入App.tsx

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

请参阅：https://react-bootstrap.github.io/getting-started/introduction