Javascript 使用自定义网页包配置编译带有scss块的Vue.js单文件组件时出错

我在尝试使用单个文件组件在vue项目中设置SCS时遇到错误。我目前在尝试使用

块时遇到此错误，但在其他情况下，我的项目按预期工作

ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

<template>
^
      Invalid operator in attribute selector for object
      in C:\Users\yanch\OneDrive\Desktop\virtualenvs\agg_site\client\src\App.vue (line 1, column 2)
 @ ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&) 4:14-279
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js

我安装了以下软件包：

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-root-import": "^6.1.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "rimraf": "^2.6.3",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.0",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },

我按照vue loader的安装说明进行了操作，我相信我已经安装了所有必要的加载程序以及正确的规则，因此我不确定为什么会出现此错误。任何帮助都将不胜感激

**编辑-在下面添加了App.vue：

<template>
    <div id="app-container">
        <NavBanner class="nav-banner"/>
        <ProfileBanner/>
        <router-view></router-view>
    </div>
</template>

<script>
    import ProfileBanner from '@/components/ProfileBanner.vue';
    import NavBanner from '@/components/NavBanner.vue';

    export default {
        data() {
            return {
                message: 'Welcome to Leddit',

            };
        },
        components: {
            ProfileBanner,
            NavBanner,
        }
    };
</script>

<style lang="scss">
#app-container {
    font-family: 'Roboto', sans-serif;
    color: blue;
    height: 100%;
    width: 100%;
}

.nav-banner {
    height: 10%;
}
</style>

从“@/components/ProfileBanner.vue”导入ProfileBanner；
从“@/components/NavBanner.vue”导入NavBanner；
导出默认值{
数据（）{
返回{
信息：“欢迎来到Leddit”，
};
},
组成部分：{
横幅,，
纳夫班纳，
}
};
#应用程序容器{
字体系列：“Roboto”，无衬线；
颜色：蓝色；
身高：100%；
宽度：100%；
}
.导航横幅{
身高：10%；
}

请发布app.vue。我看不出任何错误。看起来像是我用的。也许这可以帮助你，就像它帮助了我一样：（见第1部分和第2部分）我添加了App.vue。谢谢你的链接，我会查出来的。更新：我今天回到这个项目并成功地编译了它。我没有做任何改变。我将删除这个问题，除非有人反对，因为这似乎不是一个真正的问题，可能只是我的一些错误。谢谢大家的帮助。如果你知道错误是什么（这不是像打字错误这样的小事），你可以随时发布一个自我回答，以防其他人有类似的问题。

<template>
    <div id="app-container">
        <NavBanner class="nav-banner"/>
        <ProfileBanner/>
        <router-view></router-view>
    </div>
</template>

<script>
    import ProfileBanner from '@/components/ProfileBanner.vue';
    import NavBanner from '@/components/NavBanner.vue';

    export default {
        data() {
            return {
                message: 'Welcome to Leddit',

            };
        },
        components: {
            ProfileBanner,
            NavBanner,
        }
    };
</script>

<style lang="scss">
#app-container {
    font-family: 'Roboto', sans-serif;
    color: blue;
    height: 100%;
    width: 100%;
}

.nav-banner {
    height: 10%;
}
</style>