新手问题 Rails 中使用 bootswatch 遇到的问题

leomustafa · 2015年12月04日 · 最后由 ericguo 回复于 2015年12月05日 · 3875 次阅读

这两天在用 bootswatch 的时候遇到了一个问题,浏览器总是返回这样的信息:

Less::ParseError in Products#index
Showing /home/frank/rails-code/bootswatch-test/app/views/layouts/application.html.erb where line #15 raised:

variable @glyphiconsEotPath is undefined
Extracted source (around line #15):

13  <![endif]-->
14
15  <%= stylesheet_link_tag "application", :media => "all" %>

初步分析可能是样式冲突或覆盖的问题,调试了半天还是同样的结果。google,stackoverflow 了一下似乎没有人遇到过这样的问题,求社区朋友的帮助

运行过 rails g bootstrap:install 没有? 贴的信息太少了很难判断

#1 楼 @blacktulip 运行了,我用的是 simplex 这个主题主要样式文件如下:

application.css

/*= require_self
 *= require simplex/loader
 *= require simplex/bootswatch
 *= require bootstrap_and_overrides
 */

bootstrap_and_overrides.css.less

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

#2 楼 @leomustafa 在那个 overrides 文件里面加这几行试试看。额还是先加一行,看看能不能让错误变化一下 (如果路径不一样就改成你的路径,那几个文件名可能不对)

@glyphiconsEotPath '/assets/glyphicons-webfont.eot';

#3 楼 @blacktulip 原先就有这几行,一样报错

#4 楼 @leomustafa 有没有类似这样的额

@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");

这个貌似没见过

#8 楼 @leomustafa 错误信息完全一样么

这是 railsstrap 作者的回答

Do you have a bootstrap_and_overrides.less file? If you want to use glyphicons you need to uncomment the import statement in there. You can also set @glyphiconsEotPath to be whatever the path is to the glyphicons files should you include them in the asset pipeline.

#11 楼 @leomustafa 这就是 5 楼那几行了,你有没有重启 rails server?

#11 楼 @leomustafa 或者能否把完整的 overrides 贴到哪里看看?

重启了,我觉得会不会跟 Assets Pipeline 或者 Turbolinks 有关,还是和 ruby,rails 或者 gem 的版本有关 这是我的 Gemfile

source 'https://ruby.taobao.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Bootstrap
gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"

# Bootswatch
#gem 'twitter-bootswatch-rails'
gem 'twitter-bootswatch-rails-helpers'

# MetaSearch
gem 'ransack'

# Authentication
gem 'devise'

# Template Engine
gem "haml"
gem "liquid"

# Tool
gem 'html2haml'

# Advanced
gem "haml-rails"
gem "liquid-rails"

#14 楼 @leomustafa 我不会觉得是 gem 的问题... 那个 overrides 里面有没有一行类似 @import "twitter/bootstrap/glyphicons.less";这样的

#16 楼 @leomustafa 额,从现有信息我也想不明白为啥了...

这是 bootstrap_and_overrides.css.less

// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
//@fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
//@fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
//@fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
//@fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
//@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");

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

// Font Awesome
//@import "fontawesome/font-awesome";

// Glyphicons
@import "twitter/bootstrap/glyphicons.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @link-color: #ff0000;

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.footer {
  .container {
    .text-muted {
      line-height: 60px;
    }
  }
}

// Variables
@general-margin-bottom: 15px;

.mb-10 {
  margin-bottom: @user7m;
}

.navbar {
  .search-form {
    margin-top: 3px;
  }
}

@blacktulip 问题已解决,发现是 twitter-bootstrap-rails 版本的问题。3.2.0 ok,3.2.1.rc1 和 3.2.2 报错,可能作者还没发现这个 bug 吧!

#19 楼 @leomustafa bootstrap 用的人那么多,不可能有这样的低级错误啦,你应该用bootstrap-sass,然后从bootswatch拷贝一份对应的已经调好的样式出来用。这两个才是官方 gems,支持最新 3.2.6。

#20 楼 @ericguo 对,两个 gem 是不太一样的!

#20 楼 @ericguo Rails users should check out:

  • twitter-bootswatch-rails if using LESS.
  • bootswatch-rails if using SASS.

#22 楼 @leomustafa 用 sass 吧,bootstrap 4 用 sass 了,node. js 这边都用 sass 了(lib-sass)

需要 登录 后方可回复, 如果你还没有账号请 注册新账号