質問編集履歴

2 タイトルの変更

honsan

honsan score 4

2016/02/04 16:44  投稿

railsでアセットパイプラインが実行されない
Ruby on RailsでBootstrapがブラウザに反映しない
##概要
初心者です。[ruby on rails チュートリアル](http://railstutorial.jp/chapters/filling_in_the_layout?version=4.2#book_menu)を学習しているのですが5.1.2に記されている通り,app/assets/stylesheets/ディレクトリに新しくsassファイルを作成しBootstrapとbootstrap-sprocketsをインクルードしたのですがブラウザにbootstrapのデザインが反映されません。調べましたが私の実力ではわからなかったので教えてください。
具体的には以下の通りです。
####開発環境
- ruby 2.2.1
- rails 4.2.2
- cloud9
###手順
0. Gemfileへ`gem 'bootstrap-sass`を追加
0. `$bundle install`
0. app/assets/stylesheets/に新規ファイルを作成
`$ touch app/assets/stylesheets/custom.css.scss`
0. 3で作成したcustom.css.scssファイルにbootstrap cssを追加
``` lang-scss
@import "bootstrap-sprockets";
@import "bootstrap";
```
最後にローカルサーバーを起動し、ブラウザで表示しましたが1~4の手順を踏む前と変化がありませんでした。
ちなみに試しにcustom.css.scssファイルの内容をそのままapplication.cssに追加し.scss拡張子を加えたところbootstrapが反映されました。
以下が変更を加えたapplication.css.scssファイル
```lang-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
*= require custom
*/
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
```
####その他関連ファイル
**app/assets/stylesheets/application.css**
``` lang-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 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
*= require custom
*/
```
**app/views/layouts/application.html.erb**
``` lang-html
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
```
**app/views/static_pages/home.html.erb**(表示するページ)
```lang-html
<div class="center jumbotron">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
```
宜しくお願いします。
  • Ruby

    12653 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails 4

    2624 questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Bootstrap

    1812 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1 assets/stylesheets/application.cssに直接custom.css.scssの内容を書き込んでみた結果

honsan

honsan score 4

2016/02/04 16:41  投稿

railsでアセットパイプラインが実行されない
##概要
初心者です。[ruby on rails チュートリアル](http://railstutorial.jp/chapters/filling_in_the_layout?version=4.2#book_menu)を学習しているのですが5.1.2に記されている通り,app/assets/stylesheets/ディレクトリに新しくsassファイルを作成しBootstrapとbootstrap-sprocketsをインクルードしたのですがブラウザにbootstrapのデザインが反映されません。調べましたが私の実力ではわからなかったので教えてください。
具体的には以下の通りです。
####開発環境
- ruby 2.2.1
- rails 4.2.2
- cloud9
###手順
0. Gemfileへ`gem 'bootstrap-sass`を追加
0. `$bundle install`
0. app/assets/stylesheets/に新規ファイルを作成
`$ touch app/assets/stylesheets/custom.css.scss`
0. 3で作成したcustom.css.scssファイルにbootstrap cssを追加
``` lang-scss
@import "bootstrap-sprockets";
@import "bootstrap";
```
最後にローカルサーバーを起動し、ブラウザで表示しましたが1~4の手順を踏む前と変化がありませんでした。
 
ちなみに試しにcustom.css.scssファイルの内容をそのままapplication.cssに追加し.scss拡張子を加えたところbootstrapが反映されました。  
以下が変更を加えたapplication.css.scssファイル  
```lang-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  
*= require custom  
*/  
@import "bootstrap-sprockets";  
@import "bootstrap";  
 
 
/* universal */  
 
body {  
 padding-top: 60px;  
}  
 
section {  
 overflow: auto;  
}  
 
textarea {  
 resize: vertical;  
}  
 
.center {  
 text-align: center;  
}  
 
.center h1 {  
 margin-bottom: 10px;  
}  
```  
####その他関連ファイル
**app/assets/stylesheets/application.css**
``` lang-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 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
*= require custom
*/
```
**app/views/layouts/application.html.erb**
``` lang-html
<!DOCTYPE html>
<html>
 <head>
   <title><%= full_title(yield(:title)) %></title>
   <%= stylesheet_link_tag 'application', media: 'all',
                                          'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
   <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
     </script>
   <![endif]-->
 </head>
 <body>
   <header class="navbar navbar-fixed-top navbar-inverse">
     <div class="container">
       <%= link_to "sample app", '#', id: "logo" %>
       <nav>
         <ul class="nav navbar-nav navbar-right">
           <li><%= link_to "Home",  '#' %></li>
           <li><%= link_to "Help",  '#' %></li>
           <li><%= link_to "Log in", '#' %></li>
         </ul>
       </nav>
     </div>
   </header>
   <div class="container">
     <%= yield %>
   </div>
 </body>
</html>
```
**app/views/static_pages/home.html.erb**(表示するページ)
```lang-html
<div class="center jumbotron">
 <h1>Welcome to the Sample App</h1>
 <h2>
   This is the home page for the
   <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
   sample application.
 </h2>
 <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
           'http://rubyonrails.org/' %>
```
宜しくお願いします。
  • Ruby

    12653 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails 4

    2624 questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Bootstrap

    1812 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る