중고 신입이 개발해보기..

Rails 6.0 webpack로 bootstrap 사용하기 본문

Back-End /Ruby On Rails

Rails 6.0 webpack로 bootstrap 사용하기

rootkaien 2019. 9. 27. 14:58

관련 사이트 

https://qiita.com/suketa/items/3f5ff1c7d0d7d215a532

 

Rails6 のちょい足しな新機能を試す40（Webpacker Bootstrap編） - Qiita

# はじめに Rails 6 に追加されそうな新機能を試す第40段。 今回は、 `Webpacker Bootstrap` 編です。 Rails 6 では、 `Webpacker` がデフォルトで導入されるようになります。 Rub...

qiita.com

https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails

 

How to use Bootstrap with Webpack & Rails (Example) | GoRails - GoRails

Rails's webpacker gem makes it super easy to load both Bootstrap's CSS and JS into your Rails app using webpack

gorails.com

$ yarn add bootstrap@4.3.1 jquery   popper.js

또는 

$ yarn add bootstrap jquery   popper.js

 

config/webpack/environment.js 

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)
module.exports = environment

 home을 만들고 home과 관련대 js, scss를 만들었다. 

app/javascript/packs/home.js

require("jquery")
require("@rails/activestorage").start()

import 'bootstrap'

app/javascript/packs/home.scss

@import "bootstrap";

 

 

app/views/layouts/home.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>SPalladium</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_pack_tag 'home', media: 'all' %>
  <%= javascript_pack_tag 'home' %>
</head>
<body>
<h1> Test </h1>
<%= yield %>
</body>
</html>

 

app/view/home/index.html.erb

<h1>Home#index</h1>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

 

 

링크에 들어가면 application.js로 하는 방법이 있음 

'Back-End > Ruby On Rails' 카테고리의 다른 글

[Ruby On Rails] active admin에 paper_trail  (0) 2019.11.11
Rails] Simple Ruby On Rails REST API  (0) 2019.10.02
[ROR] integer migration.. type  (0) 2019.09.24
레일즈 개발 관련 참고 사이트  (0) 2019.09.20
[rails] 5.2부터 암호화인증서  (0) 2019.08.13
'Back-End /Ruby On Rails' Related Articles more
Comments