---
title: 使用 webpacker 安裝 bootstrap (rails 6)
tags: note
---

# 使用 webpacker 安裝 bootstrap (rails 6)

實在是太常忘記，所以要寫筆記！
## `yarn add` 相對應的套件
- `yarn add bootstrap jquery popper.js`
- `yarn add @popperjs/core`
:::info
`jquery`、`popper.js` 這兩個 bootstrap 有用到，記得裝
:::
## 設定環境變數

// 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

:::info
:bulb: 若沒有將變數設定好，有時候 javascript 會讀不到
:::

## 告訴 webpacker 要打包哪些
- 檔案結構
- `import`

// app/javascript/packs/application.js
require("script")
require("stylesheets")

// app/javascript/script/index.js
import "@popperjs/core/"
import "jquery"
import "bootstrap"

// app/javascript/stylesheets/index.js
import "bootstrap/dist/css/bootstrap.css"
import "./application.scss"

// app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap.scss";

:::info
第11行，是要引入 bootstrap 的 css!
:::

<!-- app/view/latout/applicaation.html -->
<!-- 記得加上 -->
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

這樣就好囉～可以盡情地用了！