Стиль S CSS не применяется к классам в приложении Vue

Question

Я работаю над функцией входа в систему для приложения Vue, которое использует S CSS для стилизации. У меня есть таблица стилей «app.s css», которая в настоящее время применяет стили к телу, и эта таблица стилей импортируется в «App. vue» и «Login. vue». Однако он не добавляет никакого стиля ни к каким классам, которые я добавляю к элементам HTML в «Login. vue».

Как я могу подключить таблицу стилей к просмотрам моих страниц?

Это моя таблица стилей app.s css:

body {
    background-color: $body-bg;
    font-size: x-large;
}

.container {
    border-radius: 25px;
    border: 2px solid #73ad21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Это мое приложение, App. vue:

<template>
    <div><router-view /></div>
</template>

<style lang="scss" scoped>
@import 'sass/app.scss';
</style>

<script>
export default {
    name: 'App',
    computed: {
        user() {
            return this.$store.getters.user
        },
    },
    created() {
        if (!this.user && this.$route.name !== 'login')
            this.$router.push('/login')
    },
}
</script>

Это страница входа в систему, которую я хочу для добавления класса контейнера, Login. vue:

<template>
    <section>
        <div class="container">
            <h5>
                Login here!
            </h5>
            <form @submit.prevent="loginUser">
                <div>
                    <label>Username</label>
                    <input v-model="username" />
                </div>
                <div>
                    <label>Password</label>
                    <input type="password" v-model="password" />
                </div>
                <div v-if="error_message">{{ error_message }}</div>
                <button type="submit">Submit</button>
            </form>
        </div>
    </section>
</template>

<style lang="scss" scoped>
@import '../sass/app.scss';
</style>

Это vue .config. js:

module.exports = {
    runtimerCompiler: true,
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import '@/client/sass/app.scss';`,
            },
        },
    },
}

И это веб-пакет. конфиг. js:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        app: ['./index.js', './sass/app.scss'],
    },
    mode: process.env.NODE_ENV || 'none',
    output: {
        path: path.resolve(__dirname, '../public/dist'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            vue$: 'vue/dist/vue.esm.js',
            //    styles: path.resolve(__dirname, './client/sass'),
        },
    },
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader', options: { modules: true } },
                    { loader: 'sass-loader' },
                ],
            },

            {
                test: /\.vue$/,
                use: 'vue-loader',
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
}