ch03 使用webpacker安裝bootstrap

https://www.youtube.com/watch?v=bn9arlhfaXc

高見龍網頁

https://medium.com/@hitobias/rails-6-%E4%BD%BF%E7%94%A8-bootstrap-6201ec4df75e

rails 安裝 bootstrap
make new app

$ rails new bootstrappy 創造rails app
$ cd bootstrappy 進入資料夾
$ yarn add bootstrap jquery popper.js 使用 yarn 創建bootstrap

一、首先創建app

rails new MyApp

二、用 Yarn 安裝Bootstrap及相關套件

cd MyApp

yarn add bootstrap jquery popper.js

三、設定Webpacker

打開 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;

四、app/javascript/packs/application.js, 加入以下代碼：

webpack裡面要抓出來使用的套件

require('bootstrap');

五、app/assets/stylesheets/application.css, 加入以下內容：

引入css內容

@import 'bootstrap/scss/bootstrap'

ch03_美化功能rails加入bootstrap-sass功能

心得：美化功能屬於最基礎的功能，在最先前就加進去比較減少困擾

增加bootstrap-sass的gem

ctrl-p>Gemfile
gem 'bootstrap-sass'

安裝

bundle install

把css檔案更名為scss檔案

注意一定要從.css更名為.scss檔案，不然怎麼樣都刷不出來

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

編輯app/assets/stylesheets/application.scss
添加下面兩條
@import "bootstrap-sprockets";
@import "bootstrap";

bootstrap-sass中的simple_form

ctrlp>gemfile>增加 gem 'simple_form'

$ rails generate simple_form:install --bootstrap
沒安裝效果跑不出來

在 Rails 内如何配合 Bootstrap 内建的特效，建立“提示信息”。

ctrl-p>app/assets/javascripts/application.js

在 require_tree 上加入 //= require bootstrap/alert

Step 2. 新增 app/views/common/_flashes.html.erb

touch app/views/common/_flashes.html.erb

填入

app/views/common/_flashes.html.erb

<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>

Step 3. 加入 app/helpers/flashes_helper.rb

touch app/helpers/flashes_helper.rb

加入以下内容：

app/helpers/flashes_helper.rb
module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze

  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end

  def user_facing_flashes
    flash.to_hash.slice "alert", "notice", "warning"
  end
end

Step 4. 在 application.html.erb 内加入 flash 这个 partial

在 <%= yield %> 前加入 <%= render "common/flashes" %>

app/views/layouts/application.html.erb
  <%= render "common/flashes" %>
  <%= yield %>

Step 6: 测试 flash helper 的功能

修改 app/controllers/welcome_controller.rb。加入 flash[:notice] = "早安！你好！"。你应该可以看到系统跳出“绿色”提示窗。

app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index
    flash[:notice] = "早安！你好！"
  end
end

flash[:notice] 是绿色讯息
flash[:alert] 是红色讯息
flash[:warning] 是黄色讯息

跳出錯誤的解釋

The asset "application.js" is not present in the asset pipeline.

https://stackoverflow.com/questions/55912897/the-asset-application-js-is-not-present-in-the-asset-pipeline-in-rails-6/55929141
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>