Bootstrap不路由CSS或JavaScript?没有路线匹配[GET]" /css/bootstrap.css v#34;

时间:2014-06-26 20:58:33

标签: css ruby-on-rails twitter-bootstrap bootstrap-sass

  • Rails 4.1.1
  • Ruby 2.0
  • Webrick Server

我试图让bootstrap-sass第一次在开发中工作。我尝试遵循GitHub说明,Bootstrap网站说明和其他一些视频,使我看起来可以安装gem,拖放文件,更新application.css.scss文件并引用应用程序中的css文件索引页面,在视图中调用一些css,它会工作。

当我检查页面的源代码(其中包含我在application.index.erb文件中的Bootstrap引用)以确认Bootstrap正在工作时,我收到错误。代码就在那里,但是我点击了css链接以确认其工作并得到了这个:

No route matches [GET] "/css/bootstrap.css"

这是我的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_tree .
 *= require_self
 */

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

即使我处于开发模式,我也会将生产文件设置为:

  config.serve_static_assets = true

它必须是一些路由问题,但我无法弄清楚为什么我的资产管道不能在开发模式下使css和js可用?

另外,这是我的宝石文件:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Bootstrap-sass - Latest Version for Web Design (CSS and HTML Layout)
gem 'bootstrap-sass', '~> 3.2.0'
# Vendor Prefixes
gem 'autoprefixer-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Simple_form - Forms made easy! Top form generator on ruby-toolbox.com
gem 'simple_form'

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw]

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.0'

# Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
 gem 'coffee-rails', '~> 4.0.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'

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

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

[UPDATE]

这里是完整的错误页面[网址为:http://localhost:3000/css/bootstrap.css#]:

Routing Error
No route matches [GET] "/css/bootstrap.css"

Rails.root: C:/Users/Kevin/Desktop/sites/solar_permit

Application Trace | Framework Trace | Full Trace
Routes

Routes match in priority from top to bottom

Helper         HTTP Verb    Path                         Controller#Action
Path / Url          
root_path            GET            /                            projects#index
projects_path    GET            /projects(.:format)          projects#index
                     POST           /projects(.:format)          projects#create
new_project_path     GET            /projects/new(.:format)          projects#new
edit_project_path    GET            /projects/:id/edit(.:format)     projects#edit
project_path     GET            /projects/:id(.:format)          projects#show
PATCH                           /projects/:id(.:format)          projects#update
PUT                                 /projects/:id(.:format)          projects#update
DELETE                          /projects/:id(.:format)          projects#destroy
GET|POST            /:controller(/:action(/:id))(.:format)          :controller#:action

这是应用程序布局文件:

<!DOCTYPE html>
<html>
<head>
  <title>SolarPermit</title>
 <link href="/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
 <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
<div class="container">
    <ul class="nav nav-tabs">
        <li><%= link_to "Home", root_path %></li>
    </ul>
<%= yield %>
</div>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

所以我设法通过以下方式解决问题:

ExecJS::RuntimeError in Users#index (RoR)

尽管它说删除“// = require_tree”忽略了这个问题,但是在我安装node.js并更改了UTF信息后,我试图修复一直出现的ExecJS错误。尽管有人建议我绕过它,但我删除了require_tree评论。

我确信未来会有更多错误,但根据我的研究,看起来有一个与Windows不兼容的问题和ExecJS的问题。我是Ruby的新手,所以我认为它与它相关的宝石有什么关系?例如,我尝试了therubyracer gem(如其他帖子所建议的)和所需的宝石,但它想安装python并失败。

无论如何,我进一步阅读,ExecJS和Windows存在许多问题,似乎可以通过转换到基于Linux的开发服务器来解决。

无论哪种方式,这对我现在都有效。

答案 1 :(得分:0)

这不是在rails中包含资产的方法......你的bootstrap.css在哪里?

而不是`/css/bootstrap.css'和&#39; js / bootstrap.js&#39;,你可以像这样包含你的完整资产库(这没有turbolinks):

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>

这就是turbolinks:

<%= stylesheet_link_tag    'application', media: 'all', :"data-turbolinks-track" => true %>
<%= javascript_include_tag 'application', :"data-turbolinks-track" => true %>
<%= csrf_meta_tags %>

如果您只想包含上述文件(application.css.scss),那么您应该添加:

<link href="/assets/application.css" rel="stylesheet" media="screen">

其中包括bootstrap。

另一方面,我认为您应该将@import指令保留在application.css文件之外,顺便说一句,该文件不应该命名为application.css.scss

然后,在新文件(例如main.css.scss)中添加@import指令。这是最常见的方式,我认为正确的方法。所以:

application.css(NOT .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_tree .
 *= require_self
 */

main.css.scss:

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