Vue单一文件组件中的SCSS无法编译

Question

我有一个Vue项目，我正在研究我的单一文件组件拒绝使用其SCSS进行编译的地方。没有错误，所以我不确定该怎么做。

我尝试过的事情：

• 在CSS后处理器上查看Vue文档
• 重新安装所有软件包并确认它们存在。
• 通过将标记lang设置为“ sass”而不是“ scss”来测试标记lang，以查看是否会发生错误（确实如此）。
• 对MiniCssExtractPlugin进行注释，以确保它不会以某种方式妨碍管道。

Webpack.config：

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
//const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    watch: true,
    entry: {
        index: './src/scripts/index.js',
        style: './src/scss/style.scss',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist/',
        chunkFilename: '[name].chunk.js',
        publicPath: __dirname + '/dist/',
    },
    optimization: {
        splitChunks: {
            chunks: 'async'
        },
        usedExports: true,
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['syntax-dynamic-import']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                        'vue-style-loader',
                        'css-loader',
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader, //compiles css to file. 
                    },
                    {
                        loader: 'css-loader',
                        options: {
                          sourceMap: true,
                        },
                    },
                    /*{
                        loader: 'resolve-url-loader',
                        options: {
                            debug: true,
                            sourceMap: true,
                        }
                    },*/
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: `@import '/src/scss/global.scss';`,
                            sourceMap: true,
                        }
                    },
                ],
            },
        ]
    },
    resolve: {
            alias: {
                vue: 'vue/dist/vue.common.js',
                myViews: path.resolve(__dirname, 'views'),
                scss: path.resolve(__dirname, 'scss'), 
                icons: path.resolve(__dirname, 'src/scripts/icons.js'),
                webfontloader: path.resolve(__dirname, "node_modules/webfontloader/webfontloader.js"),
            }
    },
    plugins: [
        //Globals
        new webpack.ProvidePlugin({
            'webfontloader': 'webfontloader',
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name].css',
            chunkFilename: '[name].css',
        }),
    ]
};

Package.json

{
  "name": "mgmechanical",
  "version": "1.0.0",
  "description": "M&G Mechanical Website",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "nps"
  },
  "author": "M&G Mechanical",
  "license": "UNLICENSED",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@fortawesome/free-brands-svg-icons": "^5.14.0",
    "@fortawesome/pro-duotone-svg-icons": "^5.14.0",
    "@fortawesome/pro-light-svg-icons": "^5.14.0",
    "@fortawesome/pro-regular-svg-icons": "^5.14.0",
    "@fortawesome/pro-solid-svg-icons": "^5.14.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "file-loader": "^6.0.0",
    "imports-loader": "^0.8.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.6.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "classlist-polyfill": "^1.2.0",
    "core-js": "^3.6.5",
    "lazysizes": "^5.2.2",
    "matchmedia-polyfill": "^0.3.2",
    "vue": "^2.6.11",
    "vue-router": "^3.4.3",
    "vue-the-mask": "^0.11.1",
    "vuetify": "^2.3.10",
    "webfontloader": "^1.6.28"
  }
}

Footer.vue：

<style lang="scss">
    .mg-list { 
        font-weight:Bold;
        
        .mg-list-item {
            background:Black;
        } 
    }
</style>
<template>
    <v-container tag="footer" class="accent ma-0 pa-4" fluid>
        <v-row no-gutters class='py-2'>
            <v-col cols="2" align-self="center"></v-col>
            <v-col cols="8" align-self="center">
                
            </v-col>
            <v-col cols="2" align-self="center"></v-col>
        </v-row>
        <v-row no-gutters>
            <v-col cols="2" align-self="center"></v-col>
            <v-col cols="8" align-self="center">
                <v-row align-content="start" justify="center">
                    <ul class='mg-list'>
                        <li class='mg-list-item' v-for='(area, index) in areas' :key='index' v-html='area'></li>
                    </ul>
                </v-row>
            </v-col>
            <v-col cols="2" align-self="center"></v-col>
        </v-row>
    </v-container>
</template>
<script>
    export default {
        name: 'footer',
        data: function() {
            return {
                areas: [],
            }    
        },
        methods: {
        },
        computed: {
        },
        mounted: function() {

        }
    }
</script>