bootstrap-sass와 font-awesome-sass를 rails4에 도입한다.

이전에는 Twitter-bootstrap-rails를 적용했지만,
여기 bootstrap-sass가 기본값이기 때문에
이쪽으로 해 보았습니다. 그런 다음 font-awesome-sass를 소개합니다.
메모 레벨을 쓰는 방법으로 매우 실례합니다.
$ rails new payPrint --skip-bundle 

그리고 Gemfile을 편집해 본다.
  • bcrypt(유효화) → 이번에는 관계 없지만 도입해 둔다.
  • therubyracer(활성화)
  • bootstrap-sass (추기)
  • font-awesome-sass (추기)
  • thinreports→이번에는 관계 없지만 도입해 둔다.
  • source 'https://rubygems.org'
    
    
    # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
    gem 'rails', '4.2.3'
    # Use sqlite3 as the database for Active Record
    gem 'sqlite3'
    # Use SCSS for stylesheets
    gem 'sass-rails', '~> 5.0'
    # Use Uglifier as compressor for JavaScript assets
    gem 'uglifier', '>= 1.3.0'
    # Use CoffeeScript for .coffee assets and views
    gem 'coffee-rails', '~> 4.1.0'
    # See https://github.com/rails/execjs#readme for more supported runtimes
    gem 'therubyracer', platforms: :ruby
    
    # 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 'sdoc', '~> 0.4.0', group: :doc
    
    # 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 Gem
    gem 'bootstrap-sass', '~> 3.3.5'
    gem 'font-awesome-sass'
    gem 'thinreports'
    
    group :development, :test do
      # Call 'byebug' anywhere in the code to stop execution and get a debugger console
      gem 'byebug'
    
      # Access an IRB console on exception pages or by using <%= console %> in views
      gem 'web-console', '~> 2.0'
    
      # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
      gem 'spring'
    end
    

    번들 설치


    $ bundle install --path vendor/bundle
    
  • Sprokets의 2계도 설치하지 않으면 안 되면(자) 에러가 나왔지만 무시해 다시 한번 하면 성공했다.

  • css와 js를 설정합니다.



    application.css에 @import 부분을 추가합니다.



    app/assets/stylesheets/application.css
     *= require_tree .
     *= require_self
     */
    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "font-awesome-sprockets";
    @import "font-awesome";
    

    scss로 확장자를 변경합니다.


    $ cd app/assets/stylesheets
    $ mv application.css application.css.scss
    

    application.js에 bootstrap-sprockets를 추가하십시오.



    app/assets/javascripts/application.js
    //= require jquery
    //= require jquery_ujs
    //= require turbolinks
    //= require bootstrap-sprockets  <- これを追記。
    //= require_tree .
    

    로드되는지 테스트합니다.


    $ bundle exec rails g controller StaticPages home help --no-test-framework
    

    테스트용으로 편집한다.



    app/views/static_pages/home.html.erb
    <h1>StaticPages#home</h1>
    <p>Find me in app/views/static_pages/home.html.erb</p>
    <ul class="nav nav-tabs" role="tablist">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li>ドロップダウン1</li>
          <li>ドロップダウン2</li>
        </ul>
      </li>
    </ul>
    
    <a href="#" class="btn btn-success">
      <i class="glyphicon glyphicon-plane"></i>
      <span> ファイルをアップロード</span>
    </a>
    

    서버를 시작합니다.


    rails s
    

    좋은 웹페이지 즐겨찾기