RailsのAssets構成(css / javascript)について

Railsでプロジェクトを作る際のassets周り(css / javascript)の構成等についてまとめました。 ※yarnを使ったパターンは、別途まとめたいと思います。

Boostrapの導入

bootstrap-sassというgemを利用します。Gemfileに以下を記述し、bundle installを行ってください。

gem 'bootstrap-sass', '~> 3.3.7'
gem 'jquery-rails'

stylesheetの構成に関して

├── application.scss
├── base.scss
├── mixin.scss
├── pages(特定のページのみに適用したいSCSSを配置するフォルダ)
│   └── sample.scss(ファイルが無いとエラーが起きるため、仮で配置しています)
├── partials(共通で使用するパーツを配置するフォルダ)
│   └── _texts.scss(テキストサイズ・色に関するCSS)
└── variables.scss

また、application.scss、base.scss、partials/_text.scssの内容は、以下を参考にしてください。

application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@import "variables";

@import "mixin";

@import "base";

@import "partials/*";
@import "pages/*";

base.scss

body {
  font-size: 14px;
  font-weight: 300;
  word-break: break-word;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.5;
  letter-spacing: 1.5px;
  margin: 0 0 20px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4, h5, h6{ font-size: 18px; }

.section {
  margin-bottom: 80px;
}

.item {
  margin-bottom: 60px;
}

.main {
  padding-top: 80px;
}

partials/_texts.scss

.text-ex-large {
  font-size: 18px;
}

.text-large {
  font-size: 16px;
}

.text-normal {
  font-size: 14px;
}

.text-small {
  font-size: 12px;
}

.text-ex-small {
  font-size: 10px;
}

.text-bold {
  font-weight: bold;
}

javascriptsの構成に関して

├── application.js
├── libs(ライブラリを配置するフォルダ)
│   └── sample.js
├── pages(特定のページのみに適用したいJSを配置するフォルダ)
│   └── sample.js.coffee
└── partials(共通で使用するパーツを配置するフォルダ)
    └── sample.js.coffee

ページ毎にjavascriptを呼び出せるように、config/initialiers/assets.rbに以下を追記してください。

Rails.application.config.assets.precompile += %w( pages/*.js )

また、application.jsの内容は以下を参考にしてください。

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree ./libs
//= require_tree ./partials
//= require_tree ./pages