Question

我正在为使用SCSS进行样式设置的Vue应用程序开发登录功能。我有一个“ app.scss”样式表，该样式表当前将样式应用于主体，并且该样式表已导入“ App.vue”和“ Login.vue”。但是，它不会向我添加到“ Login.vue”上的HTML元素的任何类中添加任何样式。

如何将样式表连接到页面浏览量？

这是我的样式表，app.scss：

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';`,
            },
        },
    },
}

这是webpack.config.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',
        }),
    ],
}

SCSS样式不适用于Vue应用程序中的类

0 个答案: