如何解决Ruby on Rails中的错误：“ Posts＃index中的Sass :: SyntaxError”？
[英]How to fix Error : “Sass::SyntaxError in Posts#index” in Ruby on Rails?
问题描述
I was trying to add bootstrap to my Rails app reading a tutorial, and I got the error below. 
我试图通过阅读教程将引导程序添加到我的Rails应用程序中，但出现以下错误。 Please explain what happened, and please do edit my code to show how to fix. 请说明发生了什么，并请编辑我的代码以显示如何解决。 And any resources on Rails which you would refer to get better at it will be appreciated. 而且，您会参考它在Rails上获得的任何改进方面的资源都将受到赞赏。 Ps I'm just starting. 附言：我才刚刚开始。 Thank you for the read. 谢谢您的阅读。 :D ：D
: ：
Page: http//localhost:3000/posts 页面：http // localhost：3000 / posts
Error: 错误：
Sass::SyntaxError in Posts#index
File to import not found or unreadable: bootstrap.
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/config /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/images /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/javascripts
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/stylesheets
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/vendor/assets/javascripts
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/vendor/assets/stylesheets
/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
Application Trace |
Parameters:
None
Toggle session dump Toggle env dump Response
Headers:
None
Git Repo of files : https://github.com/ScarletMcLearn/training 文件的Git Repo： https : //github.com/ScarletMcLearn/training
The code of "application.html.erb" file (If required): “ 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>
The code of application.js file (if needed): 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
The contents of the Gemfile: 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]
My "application.css" file : 我的“ 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
*/
My "custom.css.scss" file: 我的“ 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;
}
My 'application.js' file: 我的“ 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
My Gemfile: 我的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]
2 个解决方案
解决方案1
0 2016-09-12 16:56:13
Did you add the following to your Gemfile and run bundle install after that? 您是否将以下内容添加到Gemfile并在此之后运行bundle install ？
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
rails uses sprockets framework in order to pre-process assets, which includes stylesheets, javascripts and images. rails使用链轮框架来预处理资产，其中包括样式表，javascript和图像。 While pre-processing, when it encounters @import "bootstrap"; 当进行预处理时，遇到@import "bootstrap"; , it traverses through the asset path directories in order to find the imported bootstrap directory or file. ，它将遍历资产路径目录，以找到导入的引导目录或文件。 Based on the error you are encountering, looks like the sprockets engine is not able to find the bootstrap . 根据您遇到的错误， sprockets引擎似乎无法找到bootstrap 。
Make sure you have included the bootstrap-sass in your Gemfile and run bundle install to see if the error goes away. 确保已将bootstrap-sass包括在Gemfile然后运行bundle install来查看错误是否消失。
解决方案2
0 2016-09-12 17:10:52
Do this: 做这个：
application.css.scss 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 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 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
In that specific order! 按照特定的顺序！
Gemfile.rb Gemfile.rb
gem 'sass-rails', '~> 5.0'
gem 'twitter-bootstrap-rails'
Make sure you have these 2 gems in your gemfile, outside of any groups. 确保您的gemfile中有这2个gem，不在任何组中。 Then run bundle install 然后运行bundle install
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.