I created my project with Webpack and using Vue.js in development, but I can't inject <style>
in the Vue template.
It got me
Module parse failed: Unexpected token (18:5)
You may need an appropriate loader to handle this file type.
|
|
> body {
| background-color: red;
| }
this is my webpack.config.js
...
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["@babel/preset-env"]
}
},
]
},
and also my App.vue
<template>
<div id="app">
<counter></counter>
</div>
</template>
<script>
import Counter from "./app/Counter.vue";
export default {
name: "app",
components: {
counter: Counter
}
};
</script>
<style>
body {
background-color: red;
}
</style>
Had the same issue. Looking into the docs for vue-loader css needs rules too.
Install the packages vue-style-loader
and css-loader
Add the following to your rules
section in webpack.config.js
:
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},