ぬにょす(挨拶)。
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 をインストール。
Code language: plaintext (plaintext)$ bundle exec yarn add pug pug-plain-loader
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)
コメント