8

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>
Pakanon Pantisawat
  • 105
  • 1
  • 1
  • 7

1 Answers1

25

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'
    ]
  },
joe
  • 266
  • 3
  • 2
  • 3
    I don't understand why this isn't documented somewhere in the Typescript, Vue, or GitHub/vue-loader domains. Spent waaaay to long looking for this solution. – monkeydeus Feb 21 '19 at 19:14
  • 1
    Same here. Spent waaay too much time looking for this. Browsed through many git issues, other stackoverflow questions, and this is what finally worked. – Diego Lima Mar 24 '20 at 18:54