Bootstrap 样式在 create-react-app 的生产构建中消失

Question

我使用 create-react-app 制作了一个 React 应用程序。当我通过本地主机测试它时，我所有的 css 和 bootstrap 都按预期工作。但是，当我部署 React 应用程序时，bootstrap 样式突然不起作用（但是 App.css 中的 css 仍然有效）。

我试过重新排序导入语句并删除所有不必要的css，但没有任何效果。

如有任何建议，我们将不胜感激！

以下是导入语句：

App.js（包含 Routes/Home 页面元素的代码）

import React, { Component } from 'react';
import Home from './home.js'
import { HashRouter, Route, Link } from "react-router-dom";
import './App.css';

Home.js（首页代码）：

import React from 'react';
import ReactDOM from 'react-dom';

index.js:

import { HashRouter } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

import App from './App.js'
import './App.css';

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
  ), document.getElementById('root')
);

Answer 1

我的直觉是 bootstrap 样式的导入语句没有使用相对路径。我不确定您是如何捆绑此应用程序的，但可以尝试为其提供直接路径：

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

Bootstrap 样式在 create-react-app 的生产构建中消失

Bootstrap styling disappears in production build of create-react-app

javascript

css

reactjs

react-bootstrap

bootstrap-4