質問編集履歴

2 タイトルの変更 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>

<%= 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>

<![endif]-->

</head>

<body>

<%= link_to "sample app", '#', id: "logo" %>

<nav>

</ul>

</nav>

</div>

</header>

<%= yield %>

</div>

</body>

</html>

```

**app/views/static_pages/home.html.erb**(表示するページ）

```lang-html

<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 score 4 2016/02/04 16:41 投稿

railsでアセットパイプラインが実行されない

##概要

具体的には以下の通りです。

####開発環境

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

<%= 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>

<![endif]-->

</head>

<body>

<%= link_to "sample app", '#', id: "logo" %>

<nav>

</ul>

</nav>

</div>

</header>

<%= yield %>

</div>

</body>

</html>

```

**app/views/static_pages/home.html.erb**(表示するページ）

```lang-html

<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風のデザインを作成することができます。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン