如何在rails应用程序中使用bootstrap?

时间:2015-02-06 19:20:33

标签: ruby-on-rails-4 twitter-bootstrap-3

我刚刚在RailsBridge教程之后部署了我的第一个rails应用程序。我还遵循了关于如何将bootstrap添加到应用程序的教程,但我被卡住了因为它要求你使用TOUCH命令,而我正在运行没有等效触摸命令的Windows。说明如下:

在命令中键入以下内容:

touch app/assets/stylesheets/bootstrap_and_overrides.css.scss

然后,它会告诉您打开它创建的文件并输入以下内容:

@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

我刚刚从空文本文件中手动创建了文件,然后按照其余的说明进行操作。如果您感到好奇,可以使用以下指示链接:http://docs.railsbridgecapetown.org/intro-to-rails/add_bootstrap 我收到以下错误:

显示C:/Sites/railsbridgejan/suggestotron/app/views/layouts/application.html.erb第7行引发:无法找到文件'bootstrap'(在C:/ Sites / railsbridgejan / suggestotron / app中) /assets/stylesheets/application.css:15)

以下是#7行

<%= stylesheet_link_tag "application", :media => "all" %>

另外,我不确定要下载哪个Bootstrap,所以我只是下载了所有这三个。我是否必须将这些文件移动到特定位置?在教程中,它获得了宝石'bootstrap-sass'。

修改
Omar的解决方案有效,但我认为由于没有安装node.js,我遇到了另一个问题。这是我的新错误:

显示C:/Sites/railsbridgejan/suggestotron/app/views/layouts/application.html.erb第7行提出:

“... trap-sprockets”之后的无效CSS:期望的选择器或at-rule,是“@import”bootst ...“   (在C:/Sites/railsbridgejan/suggestotron/app/assets/stylesheets/application.scss:21) 提取的来源(第0行):

2 个答案:

答案 0 :(得分:2)

您好我将尝试在Windows上分享我当前的rails应用程序中的内容:

首先,我不确定为什么你必须使用那个TOUCH命令我不记得在我的应用程序中使用它了。我将尝试向您展示我的一些重要文件包含的内容,以便您可以自我指导并尝试找到解决此问题的方法。

  #Gemfile
    gem 'bootstrap-sass', '~> 3.3.1.0'



    #app/stylesheets/application.css.scss
    /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require 'masonry/transitions'
 *= require 'masonry/infinitescroll'
 *= require_tree .
 *= require social-share-button
 *= require jquery.tagsinput
 *= require jquery.minicolors
 *= require font-awesome
 *= require_self
 */


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

    #.../layout/application.html.haml
    #this goes right below %head
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true

    #app/javascripts/application.js
    //= require bootstrap-sprockets

答案 1 :(得分:0)

我最近遇到此问题时尝试按照说明解决了这个问题:

1 - 在/ assets / stylesheets中创建一个新文件,并命名为custom.css.sass

2 - 将此部分添加到custom.css.sass文件的顶部

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

3 - 保存

你很高兴。

问题出在我的custom.css.scss文件的扩展名中。使用scss是错误的,当我把它改成sass时它全部解决了。

祝你好运!