我试图让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>
答案 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";