为什么收到“找不到要导入的文件或不可读的文件”？

Question

我有一个简单的vuejs应用程序，我尝试使用以下命令将scss文件导入到App.vue（应用程序的主要入口）：

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

（我也尝试过@import 'app.scss';-我可以在此处的智能感知中看到site.css，但看不到app.scss（它们在同一个文件夹中））。

但是我遇到了这个错误：

  

@import'〜/ css / app.scss';

     

^

     

找不到或不可读的导入文件：〜/ css / app.scss。

该问题的其他答案仅提及在我的includePath配置中添加sass-loader并传入node_modeles，但这似乎不起作用。我也通过了app.scss的路径，但是没有运气。

webpack.config.js

...

module: {
    rules: [
        { test: /\.vue$/, loader: 'vue-loader' },
        { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } },
        { test: /\.css$/, loader: ['vue-style-loader', 'css-loader'] },                
        { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'url-loader' },
        {
            test: /\.scss$/,
            use: [
                "vue-style-loader",
                "css-loader",
                {
                    loader: "sass-loader",
                    options: {
                        includePaths: ["./node_modules", "./Web/wwwroot/css"]
                    }
                }
            ]
        },
        // ESLint rules
        {
            test: /\.(js|vue)$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [path.resolve(__dirname, "App")],
            options: {
                eslintPath: path.join(__dirname, '../node_modules/eslint'),
                fix: true,
                formatter: require('eslint-friendly-formatter'),
                emitError: false,
                emitWarning: false,
                failOnError: true,
                failOnWarning: false
            }
        }
    ]
},

...