vue-loader v15でPugるまで

Ruby

ぬにょす(挨拶)。

Rails の Vue.js で Pug が使えるようになったのでメモ。
色々ググったけどコレってのがなく、情報を寄せ集めて勘でやってみたら動いたってだけなので本当に正しい設定の仕方なのかは微妙なとこ。

環境

  • Rails 5.2
  • Webpacker 4.0
  • vue 2.6
  • vue-loader 15.7
  • pug 2.0
  • pug-plain-loader 1.0

やったこと

yarn で pug と pug-plain-loader をインストール。

$ bundle exec yarn add pug pug-plain-loader

config/webpack/loaders/pug.js を以下の内容で作成。

module.exports = {
  test: /\.pug$/,
  use: [{
    loader: 'pug-plain-loader'
  }]
}

config/webpack/environment.js を編集。

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const pug = require('./loaders/pug') // 追加
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('pug', pug) // 追加
module.exports = environment

コメント

タイトルとURLをコピーしました