使用 create-react-app-ts 创建的应用缺少引导 css

Question

我有一个使用 create-react-app-ts 创建的 React 应用程序。我已经为我的导航添加了 boostrap、react-bootstrap，但是似乎没有包含 bootstrap css，即没有任何链接具有任何样式与 .js 版本中出现的样式。除此之外，所有 .TSX 似乎都可以正常工作。

如果我将这些导入添加到我的 NavMenu.tsx 中，它的样式会正确，但这似乎是一种解决方案。

import '../../node_modules/bootstrap/dist/css/bootstrap.css'
import '../../node_modules/bootstrap/dist/css/bootstrap-theme.css'

我猜 bootstrap / react-bootstrap 的某些部分没有正确加载？？

package.json:

{
  "name": "test-react-21w-ts3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts-ts": "3.1.0",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "bootstrap": "^3.3.7",
    "react-bootstrap": "^0.31.5",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/node": "^10.11.3",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "typescript": "^3.1.1"
  }

}

NavMenu.tsx：

import * as React from 'react';
import { Link } from 'react-router-dom';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';
export class NavMenu extends React.Component {
    displayName = NavMenu.name
    render() {
        return (
            <Navbar inverse fixedTop fluid collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <Link to={'/'}>TestReact21wTS4</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <LinkContainer to={'/'} exact>
                            <NavItem>
                                <Glyphicon glyph='home' /> Home
                            </NavItem>
                        </LinkContainer>
                        <LinkContainer to={'/counter'}>
                            <NavItem>
                                <Glyphicon glyph='education' /> Counter
                            </NavItem>
                        </LinkContainer>
                        <LinkContainer to={'/fetchdata'}>
                            <NavItem>
                                <Glyphicon glyph='th-list' /> Fetch data
                            </NavItem>
                        </LinkContainer>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );

Answer 1

将我的导入更改为此，它工作正常： 导入'bootstrap/dist/css/bootstrap.min.css';