标签: bootstrap-sass

我有一个Rails应用程序,我正在使用bootstrap-sass gem,它将autoprefixer-rails列为依赖项.

我不太明白如何让Autoprefixer为我的应用程序的CSS添加前缀.我需要一些资产配置吗？在资产调试模式下,它会在dev中为编译后的Sass加前缀吗？

根据autoprefixer-rails的文档,我只需清除我的缓存并编写CSS ...我编译的Sass没有任何前缀,但Bootstrap的CSS确实如此.

任何帮助/解释将不胜感激.

Right now my bootstrap css version is v2.3.2 with following gem

gem 'bootstrap-sass', '~> 2.3.2.1'

I tried to upgrade it by using following configuration

gem 'bootstrap-sass', git: 'https://github.com/thomas-mcdonald/bootstrap-sass.git', branch: '3'

But after restarting the server and everything the version remained the same

所以我试过bundle exec rake convert,也许它可以解决问题

但它一直在投掷

Don't know how to build task 'convert'

那么有谁知道如何将bootstrap v3实现到我的rails项目中？

我知道关于这个的SO线程(我已将它们链接到下面),但不幸的是我无法解决这个问题,所以请允许我这个问题:-)

我用Yeoman引导了一个AngularJS项目,因此依赖于使用bower.js和SCSS的grunt.js构建.我想从bootstrap-sass-official使用font-awesome和glyphicons-halflings-regular.当运行"grunt serve"时一切都很好,但是当我想创建一个用于分发的文件集时,对字体文件的引用不会按照它们应该更新.

main.scss包含

$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
@import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

$fa-font-path: "../bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

但是dist/styles/123456.main.css中的结果是像

@font-face{font-family:FontAwesome;src:url(/Users/markus/src/angular_app/.tmp/bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0);

所以,对我来说,它看起来像路径更新(到tmp路径),但没有正确的值为"dist".我试图摆弄gruntfile中的copy和rev任务,但还没找到合适的触发器,但是:(

我用过的线程和其他来源为此找到了解决方案:

• 当项目使用grunt构建时,Fontawesome无法正常工作
• 使用grunt构建的Angular应用程序中缺少资产
• 字体真棒URL未在main.css中为grunt dist编码
• http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/
• https://github.com/yeoman/generator-angular/issues/350

有什么提示我怎么能这个？

我有上述错误.我已经看到很多问题,答案是"重启rails服务器".但这不是我的情况,因为这不是rails服务器错误.

由于我的项目在Heroku中工作得不好(下拉列表不能正常工作),但是在本地环境中我做得非常好,我正在尝试在部署之前编译所有资产,bundle exec rake assets:precompile但它会抛出错误:

~/.rvm/rubies/ruby-1.9.3-p448/bin/ruby ~/.rvm/gems/ruby-1.9.3-p448@global/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
File to import not found or unreadable: mycustom.scss.
Load path: ~/RubyProjects/sample_app_2
  (in ~/RubyProjects/sample_app_2/app/assets/stylesheets/application.css)

我认为这是一个sass问题,所以我运行bundle exec sass app/assets/stylesheets/mycustom.scss

但它会抛出错误:

Syntax error: File to import not found or unreadable: bootstrap
Load path: ~/RubyProjects/sample_app_2

所以我认为问题是引导程序不包含在项目的某个地方.因为如果我跑

bundle exec sass ~/.rvm/gems/ruby-1.9.3-p448@scaffold-example/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/_bootstrap.scss

它显示了4000多行的CSS.

难道我做错了什么？

我应该做点别的吗？

这是我的Gemfile

  source 'https://rubygems.org'

  gem 'rails', '3.2.3'
  gem 'bootstrap-sass', '2.0.0'
  gem 'bcrypt-ruby', '3.0.1'
  gem 'sass-rails', '3.2.4'
  #gem 'bcrypt-ruby', '3.1.1.rc1', :require => 'bcrypt'
  #gem 'bcrypt-ruby', '3.1.0', :require => 'bcrypt' …

我有一个rails应用程序,我使用gem bootstrap-sass在我的本地机器上开发.这一切在开发中都运行良好,但当我将我的应用程序部署到生产服务器时,glyphicons停止工作.

控制台中出现错误,指出:

 downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal 
 weight:normal stretch:normal src index:1): status 2147746065 
 source: http://mydomain.com/assets/bootstrap/glyphicons-halflings-regular.woff

确实没有这样的文件,但是具有资产管道摘要的同一文件.所以在我看来,资产管道文件的请求被破坏,因此试图获取正常文件？或者我的资产管道坏了吗？不太确定.并不确定为什么它可以在我的本地机器上运行,但不能在服务器上运行.

我是否必须以不同方式配置我的production.rb？

# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass

# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false

# Generate digests for assets URLs.
config.assets.digest = true

# Version of your assets, change this if you want to expire all your assets.
config.assets.version = '1.0'

我bootstrap-sass在我的Rails 4应用程序中使用了gem,我使用了Glpyphicons字体,它包含了我的应用程序中的图标引导程序.在开发过程中,这些图标显示得很好.但是,在任何非开发环境中,每次对Glyphicon字体文件的引用都会出现404错误.

我已经确定这是由于资产管道打破了Bootstrap样式表中的引用所做的指纹识别.

Bootstrap引用这些字体:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("bootstrap/glyphicons-halflings-regular.eot");
  src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

但是,快速ls的bootstrap文件夹显示名称不同.

glyphicons-halflings-regular-293ade90ddeb5ceccd08b9b32ae97010.eot
glyphicons-halflings-regular-533d84fb5d3948367e1b51dde3a08b39.svg
glyphicons-halflings-regular-d381f367f3f48c9f7f775a043238f0f8.ttf
glyphicons-halflings-regular-e5b007f195d752fa4823febe5e66ef4e.woff

如您所见,每个文件都附加了指纹.

删除这些指纹可以解决问题.但是,手动执行此操作并不适合部署.有没有人有这方面的解决方案？bootstrap-sass如果可以帮助我,我想避免编辑gem代码.

谢谢!

我正在尝试将bootstrap-sass gem包装在另一个gem中(让我们称之为my-engine).在此过程中,我正在构建一个小型Rails应用程序来测试.作为第一步,我想确保我可以直接在我的Rails应用程序中使用bootstrap-sass.Rails应用程序的Gemfile如下所示:

gem 'bootstrap-sass', '3.3.1.0'
gem 'my-engine, path: "~/dev/my-engine"

这很好用.引导资产被加载到我的Rails应用程序中,一切看起来都不错.现在,我想从我的Rails应用程序中取出bootstrap-sass并让它通过我的引擎加载.所以,我的Rails应用程序Gemfile现在看起来像:

gem 'my-engine, path: "~/dev/my-engine"

我的引擎的.gemspec有:

spec.add_runtime_dependency 'bootstrap-sass', '3.3.1.0'

我可以毫无问题地重新捆绑我的引擎宝石.我可以毫无问题地重新捆绑Rails应用程序.但是,当我刷新Rails应用程序的页面时,我收到以下错误:

File to import not found or unreadable: bootstrap-sprockets.

当sprockets尝试构建application.css文件时,会发生这种中断.有时这会通过,我会在构建application.js时得到一个关于错过bootstrap.js javascript文件的错误.

为什么会这样？我想知道它是否与我在本地开发宝石并且尚未发布它们的事实有关,尽管我不确定为什么这会影响已发布的bootstrap-sass.我正在使用bundler 1.5.3.

如何在bootstrap sass版本中设置相对glyphicons图标路径？

默认情况下,css font-face中使用的路径是绝对路径.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(/fonts/bootstrap/glyphicons-halflings-regular.eot?1422262129);
  src: url(/fonts/bootstrap/glyphicons-halflings-regular.eot?&1422262129#iefix) format("embedded-opentype"), url(/fonts/bootstrap/glyphicons-halflings-regular.woff2?1422262129) format("woff2"), url(/fonts/bootstrap/glyphicons-halflings-regular.woff?1422262129) format("woff"), url(/fonts/bootstrap/glyphicons-halflings-regular.ttf?1422262129) format("truetype"), url(/fonts/bootstrap/glyphicons-halflings-regular.svg?1422262129#glyphicons_halflingsregular) format("svg");
}

但我需要一个相对的:"../ fonts/bootstrap" - 所以在文件_bootstrap-variables.scss中,我设置了$ icon-font-path

$icon-font-path: "../fonts/bootstrap/"

给出以下内容

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.eot?1422262129);
  src: url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.eot?&1422262129#iefix) format("embedded-opentype"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.woff2?1422262129) format("woff2"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.woff?1422262129) format("woff"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.ttf?1422262129) format("truetype"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.svg?1422262129#glyphicons_halflingsregular) format("svg");
}

在网络上,我找到了在变量之前包含"bootstrap-sprockets"的提示,结果是

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.eot"));
  src: url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix")) format("embedded-opentype"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.woff2")) format("woff2"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.woff")) format("woff"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.ttf")) format("truetype"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular")) format("svg");
}

网址本身似乎没问题 - 但这个"字体路径"来自哪里,我该如何摆脱它呢？

或者是否有另一种指定相对路径的方法？我错了什么？

根据这篇文章有一些问题,一些glyphicons不工作,但问题是在bootstrap-sass中修复.但我使用bootstrap-sass 3.3.5,有些仍然无法正常工作.比如这些工作

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

这些都行不通

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

在我的application.css.scss文件中,我在bootstrap之前加载bootstrap-sprockets,即

@import "bootstrap-sprockets";
@import "bootstrap";

我使用rails 4.2.2,sass-rails', '~> 4.0.4','sprockets-rails', '>=2.1.4'.为什么这不起作用？

以下是检查元素chrome web工具时资产的相关摘录:

/* line 24, /Users/Chris/.rvm/gems/ruby-2.1.6@golf_mentor/gems/bootstrap-sass-3.3.5/assets/stylesheets/bootstrap/_glyphicons.scss */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 37, /Users/Chris/.rvm/gems/ruby-2.1.6@golf_mentor/gems/bootstrap-sass-  3.3.5/assets/stylesheets/bootstrap/_glyphicons.scss */
.glyphicon-asterisk:before {
  content: "\2a";
}

/* …

我安装bootstrap sass了Visual Studio 2022但它没有包含在项目中