我试图在阅读教程的Rails应用程序中添加bootstrap,我收到了以下错误。请解释发生了什么,请编辑我的代码以显示如何修复。你会提到的Rails上的任何资源都会越来越好,我们将不胜感激。 附:我刚开始。谢谢你的阅读。 :D
:
页面:http // localhost:3000 / posts
错误:
帖子中的Sass :: SyntaxError #index
导入未找到或不可读的文件:bootstrap。加载路径:
/ Users / mac / Documents / Projects / Web Development / Ruby On Rails / Jump Start Rails / training / app / assets / config / Users / mac / Documents / Projects / Web 开发/ Ruby On Rails / Jump Start Rails / training / app / assets / images / Users / mac / Documents / Projects / Web Development / Ruby On Rails / Jump Start 轨道/培训/应用/资产/ JavaScript的
/ Users / mac / Documents / Projects / Web Development / Ruby On Rails / Jump Start 轨道/培训/应用/资产/样式
/ Users / mac / Documents / Projects / Web Development / Ruby On Rails / Jump Start 轨道/培训/供应商/资产/ JavaScript的
/ Users / mac / Documents / Projects / Web Development / Ruby On Rails / Jump Start 轨道/培训/供应商/资产/样式
/Users/mac/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.2.1/vendor/assets/javascripts /Users/mac/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts /Users/mac/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled /Users/mac/.rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
Extracted source (around line #5):
// @import "bootstrap-responsive";
@import "bootstrap";
@import "bootstrap-responsive";
// body {
Rails.root:/ Users / mac / Documents / Projects / Web Development / Ruby On Rails / Jump Start Rails / training
应用程序跟踪|框架跟踪|完整追踪 应用程序/资产/样式表/ custom.css.scss:5 应用程序/视图/布局/ application.html.erb:7:在 `_app_views_layouts_application_html_erb___3077022213198936014_70226475759060' 请求
参数:
无
切换会话转储切换env转储响应
接头:
无
Git Repo of files:https://github.com/ScarletMcLearn/training
“application.html.erb”文件的代码(如果需要):
<!DOCTYPE html>
<html>
<head>
<title>Training</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
application.js文件的代码(如果需要):
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
// = require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
Gemfile的内容:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# 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.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platform: :mri
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
gem 'listen', '~> 3.0.5'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
我的“application.css”文件:
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
我的“custom.css.scss”文件:
// @import "bootstrap";
// @import "bootstrap-responsive";
//=reqire_self
@import "bootstrap";
@import "bootstrap-responsive";
// body {
// padding-top: 60px;
// padding-bottom: 40px
// }
// .sidebar-nav {
// padding: 9px 0;
// }
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
我的'application.js'文件:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
// = require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require twitter/bootstrap
我的Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# 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.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'sass-rails', '~> 5.0'
gem 'twitter-bootstrap-rails'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platform: :mri
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
gem 'listen', '~> 3.0.5'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
答案 0 :(得分:0)
您是否已将以下内容添加到Gemfile
并在此之后运行bundle install
?
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
rails
使用sprockets框架来预处理资产,其中包括样式表,javascripts和图像。在进行预处理时,遇到@import "bootstrap";
时,它会遍历资产路径目录,以便找到导入的引导程序目录或文件。根据您遇到的错误,sprockets
引擎看起来无法找到bootstrap
。
确保您已在bootstrap-sass
中加入Gemfile
并运行bundle install
以查看错误是否消失。
答案 1 :(得分:0)
执行此操作:
<强> 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 any plugin's vendor/assets/stylesheets directory 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_self
*/
<强> application.css 强>
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
<强>的application.js 强>
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
按照特定的顺序!
<强> Gemfile.rb 强>
gem 'sass-rails', '~> 5.0'
gem 'twitter-bootstrap-rails'
确保在任何群组之外的宝石文件中都有这2个宝石。然后运行bundle install