正文 

当前位置： 首页 > 问答 >

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

     2023-02-15     70

关键词：

【中文标题】无法使用 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 文件中包含 &lt;%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%&gt; 以及 application.html.erb

【讨论】：

django-webpack 在生产环境中指向 localhost

】django-webpack在生产环境中指向localhost【英文标题】：django-webpackpointstolocalhostinproduction【发布时间】：2021-09-1200:39:44【问题描述】：我使用vue和djangowebpackloader在django模板中渲染一个vue应用程序。它在本地运行良好，但是当我部... 查看详情

Google play 登录（游戏） - 无法在生产环境中使用

】Googleplay登录（游戏）-无法在生产环境中使用【英文标题】：Googleplaysignin(Games)-notworkinginproduction【发布时间】：2020-09-1017:21:00【问题描述】：我上传了我的游戏的新版本，并在其中添加了googleplay游戏集成在我运行游戏时一切... 查看详情

没有这样的元素：无法在生产环境中使用 chromedriver 和 Selenium 定位元素

】没有这样的元素：无法在生产环境中使用chromedriver和Selenium定位元素【英文标题】：nosuchelement:UnabletolocateelementusingchromedriverandSeleniuminproductionenvironment【发布时间】：2018-11-2923:24:22【问题描述】：我对seleniumchromedriver有疑问，我... 查看详情

nodejs后端项目开发与生产环境总结

...立在后台模板渲染(ejs,pug)的基础上。前后分离架构请参考webpack热更新实现nodemon在js文件变化后悔重新运行程序，在package.json的scripts中添加：nodemon还有许多可选配置，具体参阅nodemon文档以koa为例如若想要将错误抛出到浏览器页... 查看详情

Tailwind grid-cols 无法与 Next 在生产环境中一起使用

】Tailwindgrid-cols无法与Next在生产环境中一起使用【英文标题】：Tailwindgrid-colsnotworkinginproductionwithNext【发布时间】：2021-10-2710:07:37【问题描述】：我有一个下一个项目，在这里回购：https://github.com/DoctorSte/remoteOS我有一个Columns组... 查看详情

BeforeRouteEnter 无法通过脚本设置在生产环境中工作

】BeforeRouteEnter无法通过脚本设置在生产环境中工作【英文标题】：BeforeRouteEnternotworkinginproductionwithscriptsetup【发布时间】：2022-01-1312:14:48【问题描述】：我在vue-router中使用了beforeRouteEnter钩子，使用axios从两个不同的端点加载数... 查看详情

vue.2.0.5-生产环境部署

...小，Vue精简独立版本已经删除了所有警告，但是当你使用Webpack或Browserify等工具时，你需要一些额外的配置实现这点。Webpack使用Webpack的 DefinePlugin 来指定生产环境，以便在压缩时可以让UglifyJS自动删除代码块内的警告语句... 查看详情

如何在生产环境中运行 Webpack 热模块替换 (HMR)

】如何在生产环境中运行Webpack热模块替换(HMR)【英文标题】：HowtorunWebpackHotModuleReplacement(HMR)inProduction【发布时间】：2017-08-2717:24:14【问题描述】：我喜欢在生产环境中运行HMR，将其用于无缝的应用更新。我似乎找不到任何有关... 查看详情

一个十分简单的关于生产环境和开发环境的webpack配置

...放在一个公共.js文件。然后在相应的环境配置中使用 webpack-merge  将公共js合并进来。 我所了解到的配置思路， 查看详情

如何在生产系统的 Python 进程中找到正在使用内存的内容？

...:38【问题描述】：我的生产系统偶尔会出现内存泄漏，我无法在开发环境中重现。我在开发环境中使用了Pythonmemoryprofiler（特别是Heapy）并取得了一些成功，但它无法帮助我解决无法 查看详情

Vue：webpack 没有在生产中加载 css

】Vue：webpack没有在生产中加载css【英文标题】：Vue:webpackisnotloadingcssinproduction【发布时间】：2020-10-0420:05:28【问题描述】：我在Vue+Rails项目中使用webpack。我的问题是，当我在开发模式下工作时，所有css都可以正常工作，但在生... 查看详情

在生产环境中运行 NodeJS 服务器

...产中运行。该项目托管在WindowsVM上。由于许可证问题，我无法使用pm2。我不知道在生产中使用nodemon运行服务器是否 查看详情

webpack4.0中clean-webpack-plugin的使用(代码片段)

其实clean-webpack-plugin很容易知道它的作用，就是来清除文件的。一般这个插件是配合webpack-p这条命令来使用，就是说在为生产环境编译文件的时候，先把build或dist(就是放生产环境用的文件)目录里的文件先清除干净，再生成新的... 查看详情

在 vue 中使用环境变量

...在vue组件中使用它时，它说procces是未定义。我已尝试在webpack.config. 查看详情

NestJS Graphql webpack 生产构建错误

】NestJSGraphqlwebpack生产构建错误【英文标题】：NestJSGraphqlwebpackproductionbuildError【发布时间】：2020-04-1500:02:29【问题描述】：当我在生产环境中使用webpack构建项目时出现架构类型错误。错误：“boostrappingSchema时出错，必须包含唯... 查看详情

Webpack 生产构建失败：“无法解析 'aws-sdk'”

】Webpack生产构建失败：“无法解析\\\'aws-sdk\\\'”【英文标题】：Webpackproductionbuildfails:"Can\'tresolve\'aws-sdk\'"Webpack生产构建失败：“无法解析\'aws-sdk\'”【发布时间】：2018-11-1304:12:01【问题描述】：我正在使用TypeScript编写一... 查看详情

Vue在生产环境中的DEV模式

...VueJS用于设置页面。所有设置都是用Vue创建的，我们使用Webpack。一切正常，当我们在实时版本中时，没有关于Vue处于开发模式的控 查看详情

我无法使用 Python 2.7.10 在我的生产环境中部署 Django 1.8.5

】我无法使用Python2.7.10在我的生产环境中部署Django1.8.5【英文标题】：I\'munabletodeployDjango1.8.5onmyproductionenvironmentwithPython2.7.10【发布时间】：2016-01-2310:28:38【问题描述】：在我的本地环境中，使用Python2.7.10，我的Django项目使用.manag... 查看详情