Within my MPA app, I have integrated vue.js as a vital component. Below is a simple test setup:
- the relevant sections of my template
....
<div id='app-basket-checkout'>
<h1>Expecting Something Special</h1>
</div>
....
- pageBasketCheckout.js (similar to my app.js)
import Vue from 'vue'
import AppBasketCheckout from './BasketCheckout.vue'
import './dummyScss.css'
Vue.config.productionTip = false
new Vue({
render: h => h(AppBasketCheckout)
}).$mount('#app-basket-checkout')
- the component
<template>
<div id="app-basket-checkout">
{{msg}}
</div>
</template>
<script>
export default {
name: 'AppBasketCheckout',
components: {
},
data() {
return {
msg: 'Hello'
}
}
}
</script>
<style scoped>
</style>
The above code successfully renders on the front end, displaying an additional div with the word "Hello" inside.
However, when I incorporate CSS into the style tag:
<template>
<div id="app-basket-checkout">
{{msg}}
</div>
</template>
<script>
export default {
name: 'AppBasketCheckout',
components: {
},
data() {
return {
msg: 'Hello'
}
}
}
</script>
<style scoped>
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
</style>
This action triggers an error in Chrome:
Uncaught Error: Cannot find module './BasketCheckout.vue?vue&type=style&index=0&id=2711cf65&scoped=true&lang=css&'
at webpackMissingModule (VM45512 BasketCheckout.vue:4)
at eval (VM45512 BasketCheckout.vue:4)
at Module../src/BasketCheckout.vue (pageBasketCheckout.bundle.js:40)
at __webpack_require__ (index.bundle.js:4312)
at eval (pageBasketCheckout.js:3)
at Module../src/pageBasketCheckout.js (pageBasketCheckout.bundle.js:29)
at __webpack_require__ (index.bundle.js:4312)
at checkDeferredModulesImpl (index.bundle.js:4453)
at webpackJsonpCallback (index.bundle.js:4435)
at pageBasketCheckout.bundle.js:9
This error only occurs when styling is added to the component. Below is my webpack.config.js:
const path = require('path');
// webpack setup example below
// modify as required for projects
module.exports = {
// config options
};
It seems like the issue may be related to the VueLoaderPlugin which is responsible for splitting the script into separate parts for template, logic, and style. It appears that the style part is not being properly bundled. Further investigation is needed.