CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapwebpack
downtownott
downtownott

Reputation: 31

Can't get Bootstrap CSS working in Production with Webpack

Pretty new to Rails 6 and coding in general, and I'm struggling mightily getting Bootstrap to work in production.

I'm building a Shopify app (for their app store) using Rails 6, deployed to Heroku.

Everything works fine on my local. In production I get my custom CSS, but not Bootstrap.

I started by following this Medium Article on how to set it up, and have since looked at 5 or 6 others to get it working. I've tried using variations on require vs. @import. I've tried various ways of using the asset pipeline for the Bootstrap CSS, but it can't ever find the bootstrap files. I've also fiddled with config/webpacker.yml.

No luck yet. Any help would be greatly appreciated.

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@300&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>

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

Upvotes: 0

Views: 186

Answers (1)

downtownott
downtownott

Reputation: 31

Solved!

Looks like a Shopify specific issue.

I had to include <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%> in the embedded_app.html.erb file along with application.html.erb

Upvotes: 0

Related Questions