已安装基础rails gem,但未正确加载css

时间:2015-07-15 18:31:40

标签: zurb-foundation ruby-on-rails-4.2

使用foundation启动新的rails项目。我以前成功地使用过它,但由于某种原因它今天不适合我:(

以下是我经历的步骤:

rails new fndtn

cd fndtn

将gem'obound-rails'添加到我的Gemfile

bundle install
Resolving dependencies...
Using rake 10.4.2
Using i18n 0.7.0
Using json 1.8.3
Using minitest 5.7.0
Using thread_safe 0.3.5
Using tzinfo 1.2.2
Using activesupport 4.2.1
Using builder 3.2.2
Using erubis 2.7.0
Using mini_portile 0.6.2
Using nokogiri 1.6.6.2
Using rails-deprecated_sanitizer 1.0.3
Using rails-dom-testing 1.0.6
Using loofah 2.0.2
Using rails-html-sanitizer 1.0.2
Using actionview 4.2.1
Using rack 1.6.4
Using rack-test 0.6.3
Using actionpack 4.2.1
Using globalid 0.3.5
Using activejob 4.2.1
Using mime-types 2.6.1
Using mail 2.6.3
Using actionmailer 4.2.1
Using activemodel 4.2.1
Using arel 6.0.2
Using activerecord 4.2.1
Using debug_inspector 0.0.2
Using binding_of_caller 0.7.2
Using bundler 1.10.4
Using columnize 0.9.0
Using byebug 5.0.0
Using coffee-script-source 1.9.1.1
Using execjs 2.5.2
Using coffee-script 2.4.1
Using thor 0.19.1
Using railties 4.2.1
Using coffee-rails 4.1.0
Using sass 3.4.16
Using foundation-rails 5.3.0.1
Using multi_json 1.11.2
Using jbuilder 2.3.1
Using jquery-rails 4.0.4
Using sprockets 3.2.0
Using sprockets-rails 2.3.2
Using rails 4.2.1
Using rdoc 4.2.0
Using tilt 1.4.1
Using sass-rails 5.0.3
Using sdoc 0.4.1
Using spring 1.3.6
Using sqlite3 1.3.10
Using turbolinks 2.5.3
Using uglifier 2.7.1
Using web-console 2.2.1
Bundle complete! 13 Gemfile dependencies, 55 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

跑出发电机:

rails g foundation:install
  insert  app/assets/javascripts/application.js
  append  app/assets/javascripts/application.js
  create  app/assets/stylesheets/foundation_and_overrides.scss
  append  app/assets/stylesheets/foundation_and_overrides.scss
  insert  app/assets/stylesheets/application.css
conflict  app/views/layouts/application.html.erb
Overwrite /home/tim/git/fndtn/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
   force  app/views/layouts/application.html.erb

接下来,我需要一个页面来证明它正在运行,所以我复制了一个已知的好页面并显示它:

配置/ routes.rb中

  root 'home#index'

控制器/家庭/ homecontroller.rb

class HomeController < ApplicationController

  def index
  end

end

查看/家/ index.html.erb

<h1>Sample Content</h1>
<dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1b">Accordion 1</a>
    <div id="panel1b" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel2b">Accordion 2</a>
    <div id="panel2b" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel3b">Accordion 3</a>
    <div id="panel3b" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
</dl>

启动服务器,

rails s

...并且页面显示没有css善良。 :(

那么,样式表是否已加载?这是源头(仅限头部):

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>foundation-rails</title>

        <link rel="stylesheet" media="screen" href="/assets/foundation_and_overrides.self-e1e904b6b73c8f10825ea8cfcef529741aa5a0db4f1ca308619414139602986c.css?body=1" />
        <link rel="stylesheet" media="screen" href="/assets/application.self-167193cd81d9330d9ddb5c4ec7b44214fea529aa8a94f3a86e6526e4f652fc02.css?body=1" />
        <script src="/assets/vendor/modernizr.self-212c168b41d4ef12c547b56dc9c6db01f76fc65a43410de24e5581da7ee48e85.js?body=1"></script>
        <meta name="csrf-param" content="authenticity_token" />
        <meta name="csrf-token" content="kssa1n5rZlL6ZYpSS7VXYtVTMsuKxiMkydbK6swwm7O2ZVSZR12vrQ1gOYYG7LFrwKsdaY/7AiRhmX/cVGsecw==" />
        </head>

这里有几点需要注意:

  1. 该链接与工作实例不同;
  2. 之前我从未见过“.self”
  3. 我跟着链接,似乎没有所有的css
  4. 所以,我的问题是,我是否已经失去了理智,我做错了什么,或者基础破坏了什么?

    更新

    出于绝望,我尝试使用一个已知的好的gemfile。当我进行捆绑安装时,它嘶哑并告诉我进行捆绑更新。

    捆绑更新,然后尝试启动服务器。它嘶哑。

    我把原始的gemfile重新放入,做了一个bundle更新,启动了服务器......

    它有效。

    五个小时头撞墙,发布问题,几分钟后回答我自己的问题......但如果有人能解释为什么捆绑更新是必要的,我会非常感激:)

0 个答案:

没有答案