title: Webpack You may need an appropriate loader to handle this file type, with sue
body: <p>I created my project with Webpack and using Vue.js in development, but I can't inject <code>&lt;style&gt;</code> in the Vue template.</p>
  
  <p>It got me </p>
  
  <pre><code>Module parse failed: Unexpected token (18:5)
  You may need an appropriate loader to handle this file type.
  | 
  | 
  &gt; body {
  |   background-color: red;
  | }
  </code></pre>
  
  <p>this is my <code>webpack.config.js</code></p>
  
  <pre><code>  ...
    module: {
      rules: [{
          test: /\.vue$/,
          loader: "vue-loader"
        },
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude: /node_modules/,
          options: {
            presets: ["@babel/preset-env"]
          }
        },
      ]
    },
  </code></pre>
  
  <p>and also my <code>App.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;counter&gt;&lt;/counter&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Counter from "./app/Counter.vue";
  export default {
    name: "app",
    components: {
      counter: Counter
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  body {
    background-color: red;
  }
  &lt;/style&gt;
  </code></pre>