无法使Bootstrap CSS在Webpack中用于生产

编程问答 2022-08-11

问题描述

对于Rails 6来说是相当新的东西，并且在总体上来说是编码，而我正在竭力使Bootstrap投入生产。

我正在使用部署到Heroku的Rails 6构建Shopify应用程序（为其应用商店）。

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

我首先按照此Remove postcode from Woocommerce cart shipping calculator进行设置，此后，又看了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','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>

解决方法

解决了！

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

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

ruby-on-railstwitter-bootstrapwebpackwebpackwebpack