最近嘗試 webpacker + rails 的設定的時候在引入 bulma 這關就卡了超久，所以決定將我最後的設定分享出來。
第一步：安裝 webpacker + bulma
Gemfile：
# Gemfile gem 'webpacker'
然後在 terminal 下：
# install webpacker bundle # init rails webpacker:install # install bulma yarn add bulma
第二步：引入 bulma
建立一個新檔案 app/javascript/stylesheets/application.sass
@import '~bulma/bulma'
然後在 app/javascript/packs/application.js 中引入
import '../stylesheets/application'
Webpacker 實際上只會讀入在 app/javascript/packs 下面的 js 檔，所以如果需要讓 webpack 處理 css 的話必須在 js 檔之中讀入。
最後只要在 html 中引入對應的檔案即可
application.html.erb：
<%= javascript_pack_tag 'application' %> <%= stylesheet_pack_tag 'application' %>
不想看到 warning？
到這裡基本上程式已經可以跑了，我測試過 development 跟 production 都可以正確引入。不過 webpack 在 compile 的時候會出現大量的警告訊息，那是 postcss 所產生的警告。
想刪除警告有兩個解法，如果你不知道什麼是 postcss 也沒有想要使用的話，你可以選擇不要使用。在 config/webpack/loaders/sass.js裡面找到下面這行然後刪掉就好：
{ loader: 'postcss-loader', options: { sourceMap: true } },
但如果你想要使用 postcss 或是你怕你未來會想用到，可以把剛剛那行改成：
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: (loader) => [
require('postcss-cssnext')({
features: {
customProperties: {
warnings: false
}
}
})
]
}
},
然後在 teminal 中下：
yarn add postcss-cssnext
如此設定就可以讓 postcss 忽略顯示警告，基本上就是個眼不見為淨的概念 XD。