Блог

Главная - Вопросы по программированию - Не удается заставить Bootstrap CSS работать в рабочей среде с Webpack

Не удается заставить Bootstrap CSS работать в рабочей среде с Webpack

#css #ruby-on-rails #twitter-bootstrap #webpack

#css #ruby-on-rails #twitter-bootstrap #webpack

Вопрос:

Довольно новичок в Rails 6 и кодировании в целом, и я изо всех сил пытаюсь заставить Bootstrap работать в рабочей среде.

Я создаю приложение Shopify (для их App Store) с использованием Rails 6, развернутое в Heroku.

На моем локальном компьютере все работает нормально. В рабочей среде я получаю свой пользовательский CSS, но не Bootstrap.

Я начал с того, что прочитал эту среднюю статью о том, как ее настроить, и с тех пор просмотрел 5 или 6 других, чтобы заставить ее работать. Я пробовал использовать варианты require и @import. Я пробовал различные способы использования конвейера ресурсов для Bootstrap CSS, но он никогда не может найти файлы начальной загрузки. Я также повозился с config/ webpacker.yml.

Пока не повезло. Любая помощь была бы высоко оценена.

application.js:

 require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("bootstrap")

require("../stylesheets/_custom.scss")

require("shopify_app")

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

application.scss:

@import './_custom.scss';

_custom.scss:

@import "bootstrap/scss/bootstrap"; (THEN ALL MY CUSTOM CSS)

application.html.erb:

 <html>
  <head>
    <title>Super Simple</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'if Rails.env.development?%>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%>
  
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    
    
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300amp;display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Ответ №1:

Решено!

Похоже, проблема, связанная с Shopify.

Мне пришлось включить <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%> в файл embedded_app.html.erb вместе с application.html.erb