无法使用 Webpack 在生产环境中使用 Bootstrap CSS
Posted
技术标签:
【中文标题】无法使用 Webpack 在生产环境中使用 Bootstrap CSS【英文标题】：Can't get Bootstrap CSS working in Production with Webpack 【发布时间】：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>
【问题讨论】：
【参考方案1】：解决了！
看起来像是 Shopify 特有的问题。
我必须在 Embedded_app.html.erb 文件中包含 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%> 以及 application.html.erb
【讨论】：
以上是关于无法使用 Webpack 在生产环境中使用 Bootstrap CSS的主要内容，如果未能解决你的问题，请参考以下文章
[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）