Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@shimadama

[初学者]RailsにBootstrap4+Font Awesome 5の導入手順

More than 1 year has passed since last update.

目的

  • Qiitaに記事に大まかな流れをテンプレート化しておき、作業効率を上げる。
  • 今後、railsを学ぶ方に向けての参考に役立てる。

条件

  • ruby 2.5.1
  • rails5.2
  • Bootstrap : 4.1.3
  • Font Awesome : 5.2.0

手順リスト

  1. Gemfileに追加する
  2. application.scssに追加
  3. application.jsに追加

1. Gemfileに追加する

Gemfile
gem 'bootstrap', '~> 4.1.3' # 記事下の関連URLからバージョンを確認して導入
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.2.0' # 記事下の関連URLからバージョンを確認して導入
インストール
# Gemfileに追記したやつをインストールする
bundle install

2. application.scssに追加

まず、app/assets/stylesheets/application.cssのファイル名(拡張子)をapp/assets/stylesheets/application.scsに変更する

ファイル名を変更
# 下記コマンドでファイル名(拡張子:.scss)に変更できます。
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

次に、app/assets/stylesheets/application.scssに読み込み設定を行います。

app/assets/stylesheets/application.scss
# 以下を追記する
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

3. application.jsに追加

app/assets/javascripts/application.js
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap
//= require turbolinks
//= require_tree .

//= require jquery」が残ったままの方がたまにいるので、ある場合は削除してくだいさい。

関連URL

github / bootstrap-rubygem
github / font-awesome-sass
github / jquery-rails
Font Awesome 5.2

14
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shimadama
ただのメモです。間違ったこと書いてあることは大いにあります。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?