scss loader并不起作用

Question

当我尝试将.scss个文件包含到模板中时，它无法正常工作。就像他们根本不会存在一样。我的应用结构：

- src
  - components
        - App.vue
        - Login.vue
  - js
        - app.js
  - scss
        - app.scss
        - bootstrap-custom.scss
        - main.scss

vue应用程序上的所有内容似乎都正常工作但不是样式。所以在我的App.vue中我导入了这样的

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

等我的scss/app.scss

@import 'bootstrap-custom.scss';
@import '../../../node_modules/bootstrap/scss/bootstrap.scss';
@import 'main.scss';

和我的webpack配置

module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        },
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
             options: {
                 loaders: {
                     'scss': 'vue-style-loader!css-loader!sass-loader',
                     'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                 }
             }
        },
        {
            test: /\.(css|less|scss)$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }
    ]
}

所以看来我做的一切都很好，但仍然看不到结果？