使用 React 将 RoR 应用程序部署到 Heroku 时，Bootstrap 样式未显示答案

【问题标题】：Bootstrap styling not showing when deploying to heroku a RoR application with React使用 React 将 RoR 应用程序部署到 Heroku 时，Bootstrap 样式未显示
【发布时间】：2020-05-03 18:24:55
【问题描述】：

我正在将 Ruby on Rails 与 React 一起使用，并且正在部署到 Heroku。我已经here 了，回复对我没有帮助。在我的 application.html.erb 文件中，我有

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
    <%= javascript_pack_tag 'Index' %>
  </head>

我也在主要组件中导入引导程序：

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 { createStore} from 'redux';
import { Provider } from 'react-redux';
import App from '../components/App';
import rootReducer from '../reducers';


const store = createStore(rootReducer, { }, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

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

当部署到 Heroku 时，只有引导类没有被样式化，尽管它们在 DOM 中显示为类。没有错误显示开发者工具。

【问题讨论】：

标签： ruby-on-rails reactjs twitter-bootstrap heroku

【解决方案1】：

如果您将链接编码到布局中，请不要导入它，反之亦然。我会说保留链接并将其从组件中删除并确保没有其他任何东西偷偷地在其他任何地方导入重复项。

使其正常工作的可靠方法是将其保存到您的 /assets/stylesheets 目录并确保您的 application.css.scss 文件通过*= require_tree . 或名称导入它，如果您不介意牺牲的话让 CDN 为它服务的潜在缓存优势。

【讨论】：

【解决方案2】：

问题是带有 Webpacker 的 rails 6 中的资产管道尝试以下它应该使其工作：

第 1 步：

yarn add bootstrap@4.3.1 jquery popper.js

第 2 步：在config/webpack/environment.js 中添加以下内容：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

第 3 步：在app/javascript/packs/application.js 中添加以下内容：

import 'bootstrap'
import './src/application.scss'

第 4 步：创建以下文件夹app/javascript/packs/src并创建文件application.scss并放置@import '~bootstrap/scss/bootstrap'；

这应该可以解决问题并使用 Webpack 配置 Rails 6 以用于生产。

【讨论】：

【解决方案3】：

我通过添加引导链接解决了这个问题

app/views/layouts/application.html.erb

<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" %>.

该链接适用于引导程序 5。我希望它也适用于您

【讨论】：