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" } }
見た記事
- Webpack4 + Vue.js + Pug + Sass
- Vue.jsでpug+Sassの環境設定(webpack)
- Vue.jsの単一ファイルコンポーネント用の環境構築をしてみた(Pug+Sass+Typescript導入編)
どなたか、よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。