Почему моя таблица stylesheet_link_tag возвращает ошибку синтаксиса в Rails 4?

Question

Я следил за One Month Rails, Rails Tutorial и другими другими айками и онлайн-источниками, теперь я пытаюсь собрать свое первое приложение самостоятельно. Это простое приложение для письма, которое позволяет учителям отражать ответы на вопросы в нескольких текстовых полях.

Я пытаюсь импортировать самозагрузки в мои рельсы 4 приложения, и я получаю эту ошибку:

Sass::SyntaxError in StaticPages#home 
Showing /home/ubuntu/workspace/app/views/layouts/application.html.erb where line #2 raised: 

Invalid CSS after "": expected selector or at-rule, was "<h1>All posts<h1>" 
    (in /home/ubuntu/workspace/app/assets/stylesheets/posts.css.scss:1) 

Я использую c9.io для IDE.

Я понимаю только основы того, как активы предварительно скомпилированы, поэтому я сделаю все возможное, чтобы включить соответствующие файлы здесь.

Вот код, я использую в моей application.html.erb файле:

<title>Reflective Teaching</title> 
<%= stylesheet_link_tag 'application', media: 'all', 
              'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Reflective Teaching</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Posts", posts_path %></li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 
    <div class="container"> 
    <%= yield %> 
    </div> 

Вот мой Gemfile:

source 'https://rubygems.org' 


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '4.1.6' 
# Use sqlite3 as the database for Active Record 
gem 'sqlite3' 
# Use SCSS for stylesheets 
gem 'sass-rails', '~> 4.0.3' 
# 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 
gem 'bootstrap-sass' 
gem 'autoprefixer-rails' 
# Use jquery as the JavaScript library 
gem 'jquery-rails' 
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks 
gem 'turbolinks' 
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
gem 'jbuilder', '~> 2.0' 
# bundle exec rake doc:rails generates the API under doc/api. 
gem 'therubyracer', platforms: :ruby 
gem 'sdoc', '~> 0.4.0',   group: :doc 

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 
gem 'spring',  group: :development 

# 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] 

Я думаю, что таблицы стилей могут иметь что-то делать с проблемой , Вот файл application.css.sass:

/* 
* 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_self 
*= require_tree . 
*/ 
@import "bootstrap-sprockets" 
@import "bootstrap" 

Файл posts.css.scss только говорит:

<h1>All posts<h1> 

Файл home.html.erb говорит:

<h1>Reflective Teaching</h1> 
<p>Improving student learning by asking three questions:<br> 
<ul> 
    <li>What worked?</li> 
    <li>What didn't?</li> 
    <li>What next?</li> 
</ul> 
</p> 
<%= yield 'posts#index' %> 

С мои ограниченные знания, я не уверен, если мне не хватает драгоценного камня, который позволит мне связать таблицы стилей с моим файлом макета приложения или если я пропустил какой-то другой шаг в импорте бутстрапа.

Любая помощь очень ценится.

Answer 1

html код должен быть написан в html file не в css file. Ваш post.css.scss файл содержит html код <h1>All posts<h1> который должен быть в html file и post.css.scss должен включать только css не html код.

т.е. posts.css.scss

h1 { 
//css which you want to apply 
} 

Getting started with Sassy CSS (SCSS)