天道酬勤,学无止境

Using boostrap.css file in Rails production/heroku w/o LESS or SASS

I'm trying to use the glyphicons provided by bootstrap in my rails 4.0beta1 app. Everything works fine in development, but in production nothing gets rendered, and in the heroku logs I get the following error:

ActionController::RoutingError No Route Matches [GET] "/assets/glyphicons-halflings.png"

This is how I'm calling the image file in boostrap.css:

[class^="icon-"],
[class*=" icon-"] {
 background-image: url("/assets/glyphicons-halflings.png");
}

This is how I'm rendering it in the view:

<i class="icon-user"></i>

When I run rake assets:precompile and start up the production server with rails s -e production, then I can no longer see the icons. I'm not sure why this is the case. I'm not using any gems associated with bootstrap, I just have the plain bootstrap.css file and the image file under assets/images.

EDIT: I also added a .erb extension (bootstrap.css.erb) to use the asset_path helper, but I still only see the icons in development, not production.

Anybody have any ideas?

评论

Well, oddly, background-image did not seem to work in production. I was loading other background images using just the background: property, so I tried that and now it (magically) works in production:

background: url(<%= asset_path 'glyphicons-halflings.png' %>);

with bootstrap.css.erb as the filename.

Still confused as to why background-image was working in development but not production ...

Try this simple approach:

background-image: url('gliphicons-halflings.png')

EDIT: glyphicons.scc.scss.erb

@font-face {
font-family: 'Glyphicons';
src: url('<%= asset_path('glyphicons-regular.eot')%>');
src: url('<%= asset_path('glyphicons-regular.eot?#iefix')%>') format('embedded-opentype'), url('<%= asset_path('glyphicons-regular.woff')%>') format('woff'), url('<%= asset_path('glyphicons-regular.ttf')%>') format('truetype'), url('<%= asset_path('glyphicons-regular.svg#glyphicons_halflingsregular')%>') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="glyphicons-"]:before {
display: inline-block;
font-family: 'Glyphicons';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
*display: inline;
*zoom: 1;

}

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Glyphicon works locally but not on Heroku
    If you look at my app here: http://quiet-brushlands-5712.herokuapp.com/, close to the button is an icon, a glyphicon. But it's not appearing on heroku. locally it show as nicely like this: I tried the "solution" from here Using boostrap.css file in Rails production/heroku w/o LESS or SASS and from other links in Google. I need the glyph to show on Heroku as well. Any help? I didn't download the Twitter Bootstrap manually, I'm just using a gem. In my Javascript console I have this: GET http://quiet-brushlands-5712.herokuapp.com/assets/glyphicons-halflings.png 404 (Not Found) My Gemfile if it
  • Glyphicon 可以在本地运行,但不能在 Heroku 上运行(Glyphicon works locally but not on Heroku)
    问题 如果您在这里查看我的应用程序:http://quiet-brushlands-5712.herokuapp.com/,靠近按钮的是一个图标,一个字形图标。 但它没有出现在heroku上。 在本地,它显示得像这样: 我从这里尝试了“解决方案”,在 Rails production/heroku w/o LESS 或 SASS 中使用 boostrap.css 文件以及从 Google 中的其他链接。 我也需要在 Heroku 上显示字形。 有什么帮助吗? 我没有手动下载 Twitter Bootstrap,我只是在使用 gem。 在我的 Javascript 控制台中,我有这个: GET http://quiet-brushlands-5712.herokuapp.com/assets/glyphicons-halflings.png 404 (Not Found) 我的 Gemfile 如果有帮助: source 'https://rubygems.org' gem 'rails', '4.0.2' gem 'sass-rails', '~> 4.0.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.0.0' gem 'jquery-rails', '3.0.4' gem 'turbolinks', '2.0.0'
  • Heroku 无法识别“spring” gem,即使它列在 Gemfile 中(Heroku doesn't recognize 'spring' gem, even though it's listed in the Gemfile)
    问题 我过去部署到 Heroku 时遇到的问题很少。 今天我创建了一个非常基本的应用程序(实际上只是带有更新的 gemfile 的默认“新”应用程序)并将其推送到 Heroku。 但是,Heroku 无法识别“spring” gem,即使它列在 Gemfile 中。 它导致我的应用程序崩溃。 在被问到之前,是的,我在更新 Gemfile 后运行了bundle install和bundle update 。 Gemfile(从 RoR 教程中直接复制粘贴): source 'https://rubygems.org' gem 'rails', '4.2.2' gem 'sass-rails', '5.0.2' gem 'uglifier', '2.5.3' gem 'coffee-rails', '4.1.0' gem 'jquery-rails', '4.0.3' gem 'turbolinks', '2.3.0' gem 'jbuilder', '2.2.3' gem 'sdoc', '0.4.0', group: :doc group :development, :test do gem 'sqlite3', '1.3.9' gem 'byebug', '3.4.0' gem 'web-console', '2.0.0.beta3' gem 'spring', '1.1.3'
  • Heroku JS error in Rails 5 production app
    I have an issues for 2 months now and none of the answers that I got here in my countless threads about this issue have resolved my problem. So I give it another frustrating try: It is a JavaScript error that I get when my App runs in production on Heroku. The Error that I get in the Browser Console is this: Uncaught TypeError: ht.each is not a function at application-b030a52a6989f6564d19974180747e99f4ac5a28109188d096b47fc12a38f2cf.js:1 at application-b030a52a6989f6564d19974180747e99f4ac5a28109188d096b47fc12a38f2cf.js:1 at application
  • 自定义Bootstrap CSS模板(Customizing Bootstrap CSS template)
    问题 我刚刚开始使用Twitter的Bootstrap,并且想知道定制的“最佳实践”是什么。 我想开发一种系统,该系统将利用css模板(Bootstrap或其他)的所有功能,完全(轻松)可修改,具有可持续性(即–从Twitter发布下一版Bootstrap时,我不会)不必重新开始。 例如,我想将背景图像添加到顶部导航中。 看来有3种方法可以解决此问题: 修改bootstrap.css中的.topbar类。 我不是特别喜欢这个,因为我会有很多.topbar项,并且我不一定要用相同的方式进行修改。 用我的背景图像创建新类,然后应用两种样式(新样式和引导样式应用于我的元素)。 这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中,然后仅使用未由我的自定义类踩下的片段来避免。 再次,这需要比我认为必要的工作更多的工作,并且尽管它很灵活,但是它不允许我在Twitter发布下一部分时轻松更新bootstrap.css。 使用.LESS中的变量来实现自定义。 副手这似乎是一个不错的方法,但是没有使用过。除非我担心在客户端上编译css和代码的可持续性。 尽管我使用的是Bootstrap,但是这个问题可以推广到任何CSS模板。 在此先感谢您的输入。 回答1 最好的办法是。 1.从github派生twitter-bootstrap并在本地克隆。 他们正在迅速地改变库/框架
  • 在Ruby on Rails中应从公共源代码管理中删除哪些内容?(What should be removed from public source control in Ruby on Rails?)
    问题 我一直在网上搜索,但是找不到关于从新的Public Rails应用中排除的内容的任何好的/最近的示例。 我想在GitHub上开源我的应用程序,并且想知道应该从源代码管理中删除哪些类型的数据。 据我所知,应该有一个包含私人信息的config/config.yml文件。 我一直在浏览其他文件,看起来像config/database.yml , config/intializers/secret_token.rb和config/initializers/session_store.rb也应该排除在外吗? 最佳做法是分别排除所有这些文件吗? 还是有一种方法可以在config/config.yml定义所有信息并在每个文件中调用它? 此外,哪些文件和数据应保持私有和隐藏状态? 是所有这些吗? 我只是想知道我应该采取什么方法以及什么是最佳实践。 谢谢你的帮助! 回答1 我最近也一直在研究这个问题。 在将开源代码推送到Github,然后自动推送到Travis CI进行测试,然后从Travis自动部署到Heroku的整个过程中,我希望保持隐藏敏感信息。 这是到目前为止我在各种StackOverflow问答,博客等中发现的所有详细信息,即使仅在Rails应用程序内部进行配置,也希望它们可以为您提供参考(省略任何{{ ... }}您会看到) 免责声明:我绝不是专家,所以请记住
  • 如何将 Selectize.js 安装到我的 Rails 应用程序中?(How to install Selectize.js into my Rails app?)
    问题 我下载了 Selectize.js 并尝试将它安装到我的 Rails 4 应用程序中,但是文件太多,我很困惑。 成功将 Selectize 安装到他们的应用程序中的任何人都可以帮助我解决这个问题吗? 我正在尝试实现一个自动建议输入栏,用户可以从数据库中输入不超过 6 个项目。 以下是我下载的内容(0.11.0 版):很抱歉文档数量庞大,但这正是我如此困惑的原因。 -brianreavis-selectize.js-v0.11.0-0-gf293d8b (folder) -brianreavis-selectize.js-f293d8b (folder) -dist (folder) -css (folder) -selectize.css -selectize.bootstrap2.css -selectize.boostrap3.css -selectize.default -selectize.legacy -js (folder) -standalone (folder) -selectize.js -selectize.min.js -selectize.js -selectize.min.js -less (folder) -plugins (folder) -drag_drop.less -dropdown_header.less -optgroup
  • 在Twitter Bootstrap 2.0.4中更改导航栏颜色(Change navbar color in twitter bootstrap 2.0.4)
    问题 想知道是否有人知道如何在bootstrap v2.0.4中更改导航栏颜色 我尝试了这种解决方案,它似乎不起作用:Twitter Bootstrap中的导航栏颜色 还有其他解决方案吗? 我已经尝试了自定义的引导程序包,但是到目前为止,我可以进行这样的切换。 代码: .navbar-inner { background-color: #2c2c2c; /* fallback color, place your own */ /* Gradients for modern browsers, replace as you see fit */ background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333
  • How to install Selectize.js into my Rails app?
    I downloaded Selectize.js and I'm trying to install it into my Rails 4 app, but there are so many files and I'm so confused. Can anyone who has successfully installed Selectize into their app help me out with this? I'm trying to achieve an autosuggest input bar into which the user can input no more than 6 items from the database. Here are the contents of my download (version 0.11.0): Sorry about the immense number of documents, but that's exactly why I'm so confused. -brianreavis-selectize.js-v0.11.0-0-gf293d8b (folder) -brianreavis-selectize.js-f293d8b (folder) -dist (folder) -css (folder)
  • Heroku上的暂存实例(Staging instance on Heroku)
    问题 我希望能够将代码推送到dev.myapp.com进行测试,然后www.myapp.com送到www.myapp.com进行生产。 Heroku有可能吗? 回答1 您与Heroku的接口本质上是一个Git分支。 Heroku gem通过其API进行了一些工作,但是在您的Git存储库中,它只是一个新的远程分支。 heroku create yourapp # production git br -D heroku # delete the default branch heroku create staging-yourapp # staging git br -D heroku # delete the default branch 一旦在Heroku上设置了多个应用程序,就应该能够像下面这样配置Git存储库: git remote add staging git@heroku.com:staging-yourapp.git git push origin staging git remote add production git@heroku.com:yourapp.git git push origin production 我通常在“工作中”的分支机构工作,并使用Gi​​thub作为我的主人。 假设情况如此,您的部署工作流程可能类似于: git co -b working
  • 如何覆盖Twitter Bootstrap中的样式(How to overwrite styling in Twitter Bootstrap)
    问题 如何覆盖Twitter Bootstrap中的样式? 例如,我当前正在使用具有CSS规则“ float:left;”的.sidebar类。 我该如何更改它以使其转至右侧? 我正在使用HAML和SASS,但对于Web开发来说相对较新。 回答1 添加您自己的类,例如: <div class="sidebar right"></div> ,其中CSS为 .sidebar.right { float:right } 回答2 所有这些技巧都可以使用,但是更简单的方法可能是在Bootstrap样式之后包含样式表。 如果在Bootstrap( bootstrap.css )之后包含CSS( site-specific.css ),则可以通过重新定义规则来覆盖它们。 例如,如果这是在<head>包含CSS的方式 <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/site-specific.css" /> 您可以通过编写(在您的site-specific.css文件中)简单地将侧边栏向右移动: .sidebar { float: right; } 原谅缺少HAML和SASS,但我对它们的了解不足,无法在其中编写教程。 回答3 答案是CSS专用性。 您需要在CSS中更具“特定性”
  • 如何在Angular项目中使用Bootstrap?(How to use Bootstrap in an Angular project?)
    问题 我正在启动我的第一个Angular应用程序,并且我的基本设置已经完成。 如何将Bootstrap添加到我的应用程序? 如果您可以提供示例,那将是一个很大的帮助。 回答1 如果您使用Angular-CLI生成新项目,则还有另一种方法可以使Angular 2/4中的引导程序可访问。 通过命令行界面导航到项目文件夹。 然后使用npm安装引导程序: $ npm install --save bootstrap 。 --save选项将使引导程序出现在依赖项中。 编辑.angular-cli.json文件,该文件将配置您的项目。 它在项目目录中。 添加对"styles"数组的引用。 该引用必须是使用npm下载的引导程序文件的相对路径。 以我"../node_modules/bootstrap/dist/css/bootstrap.min.css", : "../node_modules/bootstrap/dist/css/bootstrap.min.css", 我的示例.angular-cli.json: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "bootstrap-test" }, "apps": [ { "root": "src", "outDir
  • 如何从 bootswatch .less 文件重新编译 .css 文件?(How to recompiles .css files starting from bootswatch .less files?)
    问题 我成功安装了 node 并且更少 我从 bootswatch 下载了以下两个文件“Flatly”: 无变量 bootswatch.less 现在我想简单地创建最终的 boostrap.css 而不做任何修改,只是为了尝试是否所有都与来自同一主题的预煮 bootstrap.css 文件无关。 我试过了 lessc variables.less > bootstrap.css 但是我得到了空的 boostrap.css 文件 我试过了 lessc bootswatch.less > bootstrap.css 但我得到了 NameError:变量@navbar-default-bg 在 C:\Users\\Downloads\bootswatch.less 中未定义,第 16 行,第 14 列:15 背景色:#fff; 16 色:@navbar-default-bg; 17 } 所以我试过这个 lessc variables.css bootswatch.less > bootstrap.css 它没有给我任何错误,但我仍然得到一个空的 bootstrap.css 文件。 有什么方法可以直接使用 less 编译 .css 或者我绝对必须执行此处自定义中列出的所有步骤? 回答1 获得 Bootswatch 自定义 Bootstrap css 的最简单方法
  • How to recompiles .css files starting from bootswatch .less files?
    I succesfully installed node and less I downloaded from bootswatch the following two files from them 'Flatly': variable.less bootswatch.less Now I'd like simply create the final boostrap.css without do any modification, just to try if all is indetical to precooked bootstrap.css files from the same theme. I tried lessc variables.less > bootstrap.css But I got empty boostrap.css file I tried lessc bootswatch.less > bootstrap.css But I got NameError: variable @navbar-default-bg is undefined in C:\Users\\Downloads\ bootswatch.less on line 16, column 14: 15 background-color: #fff; 16 color: @navbar
  • 在 Heroku Rails Cedar 14 上安装 ImageMagick Buildpack(Installing ImageMagick Buildpack on Heroku Rails Cedar 14)
    问题 我正在尝试为 ImageMagick 安装这个 3rd 方 Heroku buildpack:https://github.com/ello/heroku-buildpack-imagemagick 我尝试运行此命令: heroku buildpacks:add https://github.com/ello/heroku-buildpack-imagemagick 然后我将我的应用程序重新推送到服务器,并重新启动。 该应用程序不起作用。 所以我尝试使用以下命令重新启动 dyno: heroku ps:scale web=1 我收到此响应,除非我删除 ImageMagick buildpack,否则无法运行该应用程序: 缩放dynos...失败! 找不到那个阵型。 知道如何正确安装 ImageMagick 吗? 回答1 我昨天遇到了这个。 我不知道您的具体实例,但在我的实例中,我在其他实例之后添加了此构建包。 它必须在之前。 此外,我需要清除缓存。 我的遥控器叫做production ,所以我做了以下事情: heroku plugins:install https://github.com/heroku/heroku-repo.git heroku repo:purge_cache --remote production heroku buildpacks:remove
  • 本地 postrges 有效,但似乎无法推送到 RAILS_ENV=production heroku(Local postrges works, but can't seem to push to RAILS_ENV=production heroku)
    问题 我的应用程序在 localhost:3000 的本地环境中运行良好。 它从我的本地 postgres 数据库中提取数据,但是我似乎没有更新生产环境。 我的欢迎页面可以在我的 https://gcl.herokuapp.com 页面上查看,但是当我单击导航链接查看另一个页面时,我收到一个错误,我假设是因为该页面调用了来自数据库的数据,它找不到。 我在做$ rails db:migrate RAILS_ENV=production 我在终端中得到以下输出: (0.2ms) SELECT pg_try_advisory_lock(3666737882978712990); ActiveRecord::SchemaMigration Load (0.6ms) SELECT "schema_migrations".* FROM "schema_migrations" ActiveRecord::InternalMetadata Load (0.6ms) SELECT "ar_internal_metadata".* FROM "ar_internal_metadata" WHERE "ar_internal_metadata"."key" = $1 LIMIT $2 [["key", :environment], ["LIMIT", 1]] (0.2ms) BEGIN SQL (1
  • 无效的 css on rails 应用程序 Michael Hartl 教程(invalid css on rails app Michael Hartl tutorial)
    问题 我刚刚完成了 Mike Hartle rails 教程的第五章,当我将我的文件加载到 heroku 和 css 时有点困惑,无论出于何种原因,它都没有像我在本地那样发挥它的魔力。 如果有帮助的话,这是我的 heroku 日志的副本。 2013-09-17T00:40:31.225391+00:00 app[web.1]: vendor/bundle/ruby/2.0.0/gems/activesupport-4.0.0/lib/active_support/tagged_logging.rb:25:in `tagged' 2013-09-17T00:40:31.225544+00:00 app[web.1]: vendor/bundle/ruby/2.0.0/gems/actionpack-4.0.0/lib/action_dispatch/middleware/static.rb:64:in `call' 2013-09-17T00:40:31.225544+00:00 app[web.1]: vendor/bundle/ruby/2.0.0/gems/rack-1.5.2/lib/rack/content_length.rb:14:in `call' 2013-09-17T00:40:31.225544+00:00 app[web.1]: vendor/bundle
  • Twitter bootstrap:我需要 bootstrap-sass 和 twitter-bootstrap-rails gems 吗?(Twitter bootstrap: do I need both bootstrap-sass and twitter-bootstrap-rails gems?)
    问题 我的(Rails 3.2.13)Gemfile 有以下条目: gem 'twitter-bootstrap-rails' gem 'bootstrap-sass' 在 app/assets/javascripts/application.js 中: //= require twitter/bootstrap 在 app/assets/stylesheets/custom.css.scss 的顶部: @import 'bootstrap' 这样对吗”? 我是否需要 'twitter-bootstrap-rails' 和 'bootstrap-sass'(或者可能是 'bootstrap-sass-rails'),或者它们是多余的并且可能发生冲突? 'bootstrap-sass' gems 包含框架的 javascript,还是只包含 CSS? 回答1 如果你想使用 SASS,你应该使用 boostrap-sass 或 bootstrap-sass-rails。 Twitter-bootstrap-rails 使用 LESS 源。 如果您同时包含两者,则可能会发生冲突。 所有这些都已经包含用于引导程序的 javascript 并集成到资产管道中。 我个人使用 LESS 版本,因为它是引导程序最初编写的。(引导程序更新时可能会获得更快的版本) 通常最好在 github 上查看
  • Rails Sass:变量不通过@import 传递(Rails Sass: variables are not passed with @import)
    问题 我有一个使用 twitter bootstrap 和 sass 的 rails 项目。 scss 文件被组织成文件夹,所以我有一个更好的概述。 现在我想为包含我的颜色等的全局变量定义一个文件,并将这些值传递给其他文件,这样我的冗余代码就更少了。 虽然所有代码都已正确导入和应用,但变量不起作用。 这是当前的设置: 样式表/application.css.scss /* *= require_self *= require_tree */ /* stylesheets/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | |– components/ | |– _buttons.scss # Buttons | |– _messages.scss # Nachrichten | |– _dropdown.scss # Dropdown | |– helpers/ | |– _globals.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders
  • Rails 无法调用未定义的方法“charAt”(Rails Cannot call method 'charAt' of undefined)
    问题 我有一个 Rails 应用程序收到以下错误: Less::ParseError in Home#index Showing /Users/burtondav/sites/requestsys/app/views/layouts/application.html.erb where line #20 raised: Cannot call method 'charAt' of undefined (in /Users/burtondav/sites/requestsys/app/assets/stylesheets/bootstrap_and_overrides.css.less) Extracted source (around line #20): 17: } 18: </style> 19: 20: <%= stylesheet_link_tag "application", :media => "all" %> 我正在使用的一些 GEMS: gem 'rails', '3.2.11' gem 'twitter-bootstrap-rails' group :assets do gem 'sass-rails', '~> 3.2.3' gem 'coffee-rails', '~> 3.2.1' gem 'less-rails' gem 'commonjs' gem