无法使用 Webpack 在生产环境中使用 Bootstrap CSS答案

【问题标题】：Can't get Bootstrap CSS working in Production with Webpack无法使用 Webpack 在生产环境中使用 Bootstrap CSS
【发布时间】：2020-12-27 04:54:47
【问题描述】：

对 Rails 6 和一般编码来说还是很陌生，我正在努力让 Bootstrap 在生产中工作。

我正在使用 Rails 6 构建 Shopify 应用（用于他们的应用商店），并部署到 Heroku。

在我的本地一切正常。在生产中，我得到了我的自定义 CSS，但没有 Bootstrap。

我开始关注这个Medium Article 来了解如何设置它，并且已经查看了其他 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@300&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>

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

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap webpack

【解决方案1】：

解决了！

看起来像是 Shopify 特有的问题。

我必须在 Embedded_app.html.erb 文件中包含 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%> 以及 application.html.erb

【讨论】：