React & Rails - Bootstrap 样式已经投入生产

Question

我一直在关注这个精彩的教程 Rails & React Tutorial，在部署到生产环境后遇到了问题。 bootstrap 样式/类没有在生产中应用。 这个问题似乎是类似这一个，不过海报在他的回答含糊其辞。

这是本地主机上的主页图片：

这是生产主页的图片：

主页的代码如下，可以看到bootstrap类jumbotron等：

export default () => (
<div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
  <div className="jumbotron jumbotron-fluid bg-transparent">
  <img style={imgstyle} src={require("../../assets/images/hk_banner.jpg")} alt="Image of HK" />
    <div className="container secondary-color">
      <h1 className="display-4">Minority Experiences: HK</h1>
      <p className="lead">
        Experiences of the underrepresented.
      </p>
      <hr className="my-4" />
      <div style={{display: "flex", justifyContent: "space-between"}}>
        <Link
          to="/read"
          className="btn btn-lg custom-button"
          role="button"
        >
          Read Experiences
        </Link>
        <Link
          to="/about"
          className="btn btn-lg custom-button"
          role="button"
        >
          About Website
        </Link>
      </div>
    </div>
  </div>
</div>
);

我知道这是一个引导程序样式问题，因为在我的应用程序中，我也使用引导程序模式，但它也不起作用。

这就是我将引导程序链接到文件 /app/javascript/packs/Index.jsx 中的项目（根据教程）的方式：

import React from "react";
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import App from "../components/App";

document.addEventListener("DOMContentLoaded", () => {
  render(
    <App />,
    document.body.appendChild(document.createElement("div"))
  );
});

Answer 1

@Ayudh，您可以使用以下方式在 React 中使用 Bootstrap，试试看希望它能解决您的问题

1. 导航到项目的根文件夹并打开 public/index.html 文件，然后在该部分中添加以下代码：

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

如果需要在 React 应用程序中使用依赖于 JavaScript/jQuery 的 Bootstrap 组件，则还需要在文档中包含 jQuery、Popper.js 和 Bootstrap.js。 在结束</body>标记之前添加 CDN。

2. 您还可以通过从 npm 安装来将 Bootstrap 导入到您的 React 应用程序中。

   $ npm install bootstrap --save

安装 bootstrap 包后，您需要将它导入到您的 React 应用程序入口文件中。 打开 src/index.js 文件并添加以下代码：

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

安装 jQuery

$ npm install jquery popper.js

接下来，转到 src/index.js 文件并添加以下导入：

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

就是这样。 您现在可以在 React 应用程序中使用 Bootstrap 的全部功能。