Css 反应&；Rails-引导样式已经投入生产

我一直在学习优秀的Rails&React教程，在部署到生产环境后遇到了一个问题。引导样式/类未在生产中应用。这个问题似乎与一个问题相似，但海报在他的回答中模糊不清

以下是localhost上主页的图片：

以下是生产主页的图片：

主页的代码如下，您可以看到引导类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"))
  );
});

从“React”导入React；
从“react dom”导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“jquery”导入美元；
从“Popper.js”导入Popper；
导入'bootstrap/dist/js/bootstrap.bundle.min'；
从“./组件/应用程序”导入应用程序；
document.addEventListener（“DOMContentLoaded”，（）=>{
渲染(
,
document.body.appendChild（document.createElement（“div”））
);
});

@Ayudh，您可以使用以下方法在React中使用引导，尝试一下，希望它能解决您的问题

导航到项目的根文件夹并打开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">

安装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应用程序中使用引导的全部功能。

Hey@ayudh，您能告诉我您的引导文件在哪个文件夹中，以及如何链接它吗project@AshwinBhamare我添加了一个编辑，解释了如何链接项目中的引导文件。我们通过Thread安装bootstrap。我认为您可能缺少第1部分中的一些代码。在你的回答中，基本上，我使用了你概述的第二种方法，我切换到第一种方法，效果很好。

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