Why doesn't interpreting vue template with style work?

Question

webpack

Hello, I am attaching the webpack config code =>

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CopyWebPackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

/**
 * Сжимается client-side(не CEF), а так же копируется server-side в нужную директорию.
 **/
let clientServerSide = {
    name: 'client-server-side',
    entry: {
        'client_packages': path.join(__dirname, '/MuffinRp/client')
    },
    output: {
        path: path.resolve(__dirname),
        filename: '[name]/index.js'
    },
    plugins: [
        new CopyWebPackPlugin([
            {
                from: './MuffinRP/server',
                to: './packages/MuffinRP'
            }
        ])
    ],
    node: {
        fs: 'empty'
    },
    resolve: { 
        extensions: [ '.js', '.html' ]
    },
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
}

/**
 * перетрансформируем VUE
 */
let cefSide = {
    name: 'cef-side',
    entry: {
        'client_packages': path.join(__dirname, '/MuffinRP/client/cef-vue/index.js')
    },
    output: {
        path: path.join(__dirname, 'client_packages', 'cef-vue'),
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                      'scss': [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                      ],
                      'sass': [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader?indentedSyntax'
                      ]
                    }
                }
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new CopyWebPackPlugin([
            {
                from: './MuffinRP/client/cef-vue/index.html',
                to: './'
            }
        ])
    ],
    node: {
        fs: 'empty'
    },
    resolve: { 
        extensions: [ '.js', '.html' ]
    },
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
}

module.exports = [
    clientServerSide,
    cefSide
];

With this configuration, when building the project, an error appears =>

ERROR in ./MuffinRP/client/cef-vue/App.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./MuffinRP/client/cef-vue/App.vue?vue&type=style&index=0&lang=css&) 14:2
    Module parse failed: Unexpected token (14:2)
    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.
    |
    |
    > p {
    |     font-size: 24px;
    | }

Here is the vue template file itself =>

<template>
    <div id="apps">
        <p>Hello word</p>
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

<style>
    p {
        font-size: 24px;
    }
</style>

Answer 1

I solved the problem by adding the following to module.rules

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