質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Q&A

解決済

2回答

4274閲覧

Vue単一コンポーネントのコンパイルをWebpack4でpugとsassをコンパイルしたい

fruitmachine

総合スコア47

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

0グッド

1クリップ

投稿2018/11/15 12:37

Vue単一コンポーネントのtemplateの言語をpugに指定したいのですが、
以下のエラーが出てコンパイルが通りません。

Module Error (from /Users/shoko/dev/wordpress/node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Error compiling template: div | item - Component template requires a root element, rather than just text.

webpackのバージョンは4です。

調べてみるものの、単一コンポーネントでなかったり、webpackのバージョンが3であったりして、
他の記事の通りやってみてもうまくいきません。

単一コンポーネントファイル

<template lang="pug"> div | item </template> <style lang="scss"> p { display: flex; } </style>

webpack.config.json(一部抜粋)

const ExtractTextPlugin = require('extract-text-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { module: { rules: [ { test: /.vue$/, loader: 'vue-loader', options: { extractCSS: true, loaders: { html: 'pug-loader', js: 'babel-loader', scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss"> sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass"> }, }, } ] }, plugins: [ new ExtractTextPlugin('[name]/public/css/style.css'), new VueLoaderPlugin(), resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }, };

package.json

{ "devDependencies": { "autoprefixer": "^8.4.1", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^1.1.11", "node-sass": "^4.8.3", "postcss-loader": "^2.1.4", "pug": "^2.0.3", "pug-loader": "^2.4.0", "pug-plain-loader": "^1.0.0", "sass-loader": "^7.0.1", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "vue": "^2.5.17", "vue-cli": "^2.9.6", "vue-loader": "^15.3.0", "vue-template-compiler": "^2.5.17", "webpack": "^4.6.0", "webpack-cli": "^3.1.1", "webpack-notifier": "^1.6.0" } }

見た記事

どなたか、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

こうでした。

js

1rules:[ 2{ 3 test: /.vue$/, 4 use: [ 5 { 6 loader: 'vue-loader' 7 } 8 ] 9}, 10{ 11 test: /.pug$/, 12 oneOf: [ 13 { 14 resourceQuery: /^?vue/, 15 use: ['pug-plain-loader'] 16 }, 17 { 18 use: ['raw-loader', 'pug-plain-loader'] 19 } 20 ] 21} 22]

投稿2019/03/24 15:10

fruitmachine

総合スコア47

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

// webpack.config.js -> module.rules { test: /.pug$/, loader: 'pug-plain-loader' }

webpack.config.js -> module.rules

https://vue-loader.vuejs.org/guide/pre-processors.html#pug

投稿2018/11/26 14:13

wilf

総合スコア300

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問