Стиль Bootstrap не отображается при развертывании на heroku приложения RoR с React - PullRequest
Новая
       6

Стиль Bootstrap не отображается при развертывании на heroku приложения RoR с React

1 голос
/ 16 января 2020

Я использую Ruby в Rails с React, и я развертываюсь в Heroku. Я уже был здесь , и ответы мне не помогают. В моем приложении. 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. Нет ошибок, показывая инструменты разработчика.

Ответы [ 2 ]

3 голосов
/ 17 января 2020

Проблема в том, что конвейер ресурсов в 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

Шаг 3: в app/javascript/packs/application.js добавить следующее: 

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

шаг 4: создать следующую папку app/javascript/packs/src, создать файл application.scss и поместить @import '~bootstrap/scss/bootstrap';

Это должно решить проблему и настроить Rails 6 с Webpack для производства.

1 голос
/ 17 января 2020

Если вы кодируете ссылку в свой макет, не импортируйте ее, и наоборот. Я бы сказал, оставьте ссылку вверх и вырежьте ее из компонента и убедитесь, что больше ничего не скрыто импортирует дубликаты где-либо еще.

Безошибочный способ заставить его работать - сохранить его в каталоге / assets / stylesheets и убедиться, что ваше приложение. css .s css файл импортирует его либо через *= require_tree ., либо по имени , если вы не возражаете пожертвовать потенциальным преимуществом кэширования, когда cdn обслуживает его.

...