文章/答案/技术大牛

发布

社区首页 >问答首页 >React & Rails - Bootstrap样式已经投入生产

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

Stack Overflow用户

提问于 2019-12-24 11:24:42

回答 1查看 524关注 0票数 1

我一直在跟踪这出色的教程Rails & React教程，并且在部署到生产中后遇到了一个问题。引导样式/类不在生产中应用。这一问题似乎与这 one类似，但海报在他的回答中含糊不清。

以下是localhost主页的图片：

这是制作首页的图片：

主页的代码如下所示，您可以看到引导类巨无霸等等：

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

css

ruby-on-rails

reactjs

twitter-bootstrap

heroku

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-24 11:56:53

@Ayudh，您可以使用Bootstrap使用以下方法，希望它能解决您的问题

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

如果您需要在您的React应用程序中使用依赖于JavaScript/jQuery的引导程序组件，那么您还需要在文档中包括jQuery、Popper.js和Bootstrap.js。在关闭的</body>标记之前添加CDN。

您还可以通过从npm安装Bootstrap在您的React应用程序中导入它。 $ npm安装引导程序--保存

安装引导包后，您将需要将其导入到您的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的全部功能。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59468094

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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