Ruby on rails 使用React部署到heroku RoR应用程序时未显示引导样式

我将RubyonRails与React一起使用，并部署到Heroku。我已经这样做了，但这些回应对我没有帮助。在我的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')),
  );
});

从“React”导入React；
从'react dom'导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“jquery”导入美元；
从“Popper.js”导入Popper；
导入'bootstrap/dist/js/bootstrap.bundle.min'；
从“redux”导入{createStore}；
从'react redux'导入{Provider}；
从“../components/App”导入应用程序；
从“../reducers”导入rootReducer；
const store=createStore（rootReducer，{}，window.\uuu REDUX\u DEVTOOLS\u EXTENSION\uuuu&&window.\uuuu REDUX\u DEVTOOLS\u EXTENSION\uuu（））；
document.addEventListener（'DOMContentLoaded'，（）=>{
渲染(
,
document.body.appendChild（document.createElement（'div'）），
);
});

---

当部署到Heroku时，虽然引导类在DOM中显示为类，但只有引导类没有被样式化。显示开发人员工具时没有错误。

如果要将链接编码到布局中，请不要将其导入，反之亦然。我要说的是，保持链接并将其从组件上剪切下来&确保没有其他东西在其他地方偷偷地导入副本

---

使其工作的可靠方法是将其保存到/assets/stylesheets目录，并确保您的application.css.scss文件通过

*=require\u tree.

或按名称导入，如果您不介意牺牲cdn为其提供服务的潜在缓存好处。

问题在于rails 6中的资产管道和Webpacker，请尝试以下方法，它应该可以工作：

步骤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

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

步骤3： 在

app/javascript/packs/application.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

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

步骤4： 创建以下文件夹

app/javascript/packs/src

，创建文件

application.scss

，并放置

@import'~bootstrap/scss/bootstrap'

这将解决问题，并为Rails 6配置用于生产的Webpack