Приложение создано с помощью команды create-реакции-app-ts, отсутствует начальная загрузка CSS - PullRequest
0 голосов
/ 05 октября 2018

У меня есть приложение React, которое было создано с использованием create-реагировать-app-ts.Я добавил для своей навигации boostrap, response-bootstrap, однако, похоже, что bootstrap css не включен, т.е. ни одна из ссылок не имеет какого-либо стиля по сравнению со стилем, который появляется в версии .js.Кроме того, кажется, что все .TSXs работают правильно.

Если я добавлю этот импорт в мой NavMenu.tsx, он будет корректно стилизован, но это будет слишком большой взлом для решения.

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

Я предполагаю, что какая-то часть начальной загрузки / реакции-начальной загрузки загружается неправильно ??

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

1 Ответ

0 голосов
/ 05 октября 2018

Изменил мой импорт на этот, и он работает нормально: import 'bootstrap / dist / css / bootstrap.min.css';

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...