gpt4 book ai didi

ruby-on-rails - 使用 React 将 RoR 应用程序部署到 heroku 时不显示 Bootstrap 样式

转载 作者:行者123 更新时间:2023-12-04 16:35:20 24 4
gpt4 key购买 nike

我将 Ruby on Rails 与 React 结合使用,并将部署到 Heroku。我一直here已经和 react 没有帮助我。在我的 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>

我也在主要组件中导入 Bootstrap :

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 时,只有 Bootstrap 类没有被设置样式,尽管它们在 DOM 中显示为类。没有错误显示开发者工具。

最佳答案

问题是 rails 6 中的 assets pipeline 和 Webpacker 尝试以下它应该使它工作:

第一步:

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 以用于生产。

关于ruby-on-rails - 使用 React 将 RoR 应用程序部署到 heroku 时不显示 Bootstrap 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59777625/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com