为什么 CSS 没有加载到我的 React Electron 应用程序中？

Question

我已经使用 electron-react-boilerplate 包通过 React 设置了一个 Electron 应用程序，然后使用 npm 导入了 react-bootstrap 库。

我编辑了 App.tsx 的默认内容以测试 bootstrap 组件。这是代码：

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>
  );
}

这是我的应用程序运行时的样子。如您所见，内容在那里，但是正在加载 bootstrap CSS 的 none。

Answer 1

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

npm install react-bootstrap bootstrap@5.1.3

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

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

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

为什么 CSS 没有加载到我的 React Electron 应用程序中？

Why is CSS not being loaded in my React Electron app?

reactjs

electron

react-bootstrap