使用自定义Webpack配置使用scss块编译Vue.js单文件组件时出错

Question

尝试使用单个文件组件在vue项目中设置scss时遇到错误。当我尝试使用<style lang="scss">块时，我当前遇到此错误，但是否则我的项目将按预期工作。

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

我不是专家，但是此错误使我认为vue-loader规则存在问题。似乎它正在尝试将模板编译为样式块（尽管我可能错了）。这是我的webpack配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader'},
            { test: /\.vue$/, use: 'vue-loader'},
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
            { test: /\.(png|jpg|gif)$/, use: 'file-loader' },
            { test: /\.scss$/, use: ['vue-style-loader','css-loader', 'sass-loader']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new VueLoaderPlugin(),
    ],  
    devServer: {
        historyApiFallback: true,
    },
    resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '~': path.resolve(__dirname, './src/style'),
        }
    },
};

我安装了以下软件包：

"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>