왜 stylesheet_link_tag가 Rails 4에서 구문 오류를 반환합니까?

Question

1 개월 Rails, The Rails Tutorial 및 기타 다양한 aticle과 온라인 소스를 따라 가면서 첫 번째 앱을 직접 작성하려고합니다. 그것은 교사가 몇 가지 텍스트 필드에 질문에 대답함으로써 반영 할 수있는 간단한 쓰기 애플 리케이션입니다.

내 레일에 4 응용 프로그램을 부트 스트랩을 가져 오기 위해 노력하고있어, 나는이 오류가 발생 해요 : 내가 IDE에 대한 c9.io을 사용하고

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) 

.

자산을 미리 컴파일하는 방법에 대한 기본 사항 만 이해하므로 관련 파일을 여기에 포함 시키도록 최선을 다할 것입니다.

<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입니다 : 여기

내가 내 application.html.erb 파일에 사용하고 코드의

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] 

나는 스타일 시트 문제와 함께 할 수있는 뭔가가 있다고 생각 .

이

/* 
* 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' %> 

에서 여기 application.css.sass 파일입니다 내 제한된 지식, 스타일 시트를 내 응용 프로그램 레이아웃 파일에 연결할 수있는 보석을 놓치고 있는지, 아니면 부트 스트랩을 가져 오는 다른 단계를 놓친 경우 잘 모르겠습니다.

도움을 주시면 대단히 감사하겠습니다.

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)