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
Code language: plaintext (plaintext)

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

module.exports = { test: /\.pug$/, use: [{ loader: 'pug-plain-loader' }] }
Code language: JavaScript (javascript)

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
Code language: JavaScript (javascript)

コメント

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