Css in Demo.vue throws Error

[SeverinAlexB]

I just went through the tutorial and I get an webpack error when executing ./node_modules/.bin/webpack.

(venv) Severins-MacBook-Pro:my_django_vue severinbuhler$ ./node_modules/.bin/webpack
Hash: 5310d40d11efa30d85d3
Version: webpack 4.41.2
Time: 861ms
Built at: 11/25/2019 8:02:00 AM
 Asset     Size  Chunks             Chunk Names
app.js  771 KiB    main  [emitted]  main
Entrypoint main = app.js
[./assets/js/index.js] 226 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
    + 14 hidden modules

ERROR in ./assets/js/components/Demo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./assets/js/components/Demo.vue?vue&type=style&index=0&lang=css&) 11:0
Module parse failed: Unexpected token (11:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> .red {
|     color: red;
| }
 @ ./assets/js/components/Demo.vue?vue&type=style&index=0&lang=css& 1:0-130 1:146-149 1:151-278 1:151-278
 @ ./assets/js/components/Demo.vue
 @ ./assets/js/index.js

Demo.vue

<template>
    <div>
        <p class="red">This is just a demo.</p>
    </div>
</template>

<script>
</script>

<style>
.red {
    color: red;
}
</style>

The error only occurs when I have css in <style>.

Does anybody know why this error occurs?

Best regards
Severin

[SeverinAlexB]

Ok, just stumbled upon the solution.

Add the following rule to your webpack.config.js

      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },