bootstrap-sass와 font-awesome-sass를 rails4에 도입한다.
여기 bootstrap-sass가 기본값이기 때문에
이쪽으로 해 보았습니다. 그런 다음 font-awesome-sass를 소개합니다.
메모 레벨을 쓰는 방법으로 매우 실례합니다.
$ rails new payPrint --skip-bundle
그리고 Gemfile을 편집해 본다.
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
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
Reference
이 문제에 관하여(bootstrap-sass와 font-awesome-sass를 rails4에 도입한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/wantata222/items/8fe547ae9fb9616492ef
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
*= require_tree .
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
$ cd app/assets/stylesheets
$ mv application.css application.css.scss
//= 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
Reference
이 문제에 관하여(bootstrap-sass와 font-awesome-sass를 rails4에 도입한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/wantata222/items/8fe547ae9fb9616492ef
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<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
Reference
이 문제에 관하여(bootstrap-sass와 font-awesome-sass를 rails4에 도입한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/wantata222/items/8fe547ae9fb9616492ef텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)