Javascript Karma失败-模块解析失败

尝试在reactJs应用程序上使用带有Karma Runner的Mocha框架。 出于某些原因，我收到以下错误消息：

  Module parse failed: C:\Dev\marvel-memory-card-v2\src\index.scss Unexpected  token (1:0)
  You may need an appropriate loader to handle this file type.

  Uncaught Error: Cannot find module "./index.scss" at tests.webpack.js:22214

因为一切对我来说都是新的。不知道如何解决这个问题

以下是我的webpack.config文件：

"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

// global css
loaders.push({
    test: /\.css$/,
    exclude: /[\/\\]src[\/\\]/,
    loaders: [
        'style?sourceMap',
        'css'
    ]
});
// local scss modules
loaders.push({
    test: /\.scss$/,
    exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
        'postcss',
        'sass'
    ]
});

// local css modules
loaders.push({
    test: /\.css$/,
    exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap'
    ]
});


module.exports = {
    entry: [
        'react-hot-loader/patch',
        './src/index.jsx' // your app's entry point
    ],
    devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
    output: {
        publicPath: '/',
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders
    },
    devServer: {
        contentBase: "./public",
        // do not print bundle build stats
        noInfo: true,
        // enable HMR
        hot: true,
        // embed the webpack-dev-server runtime into the bundle
        inline: true,
        // serve index.html in place of 404 responses to allow HTML5 history
        historyApiFallback: true,
        port: PORT,
        host: HOST
    },
    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new DashboardPlugin(),
        new HtmlWebpackPlugin({
            template: './src/template.html'
        }),
    ]
};

和karma.conf文件

var webpack=require（'webpack'）

有什么办法解决我的问题吗？请让我知道。

---

非常感谢

尝试将此行添加到您的因果报应配置中：

basePath : __dirname + '/',

这是Web包的scss加载程序：

{
    test: /\.scss$/,
    exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
        'postcss',
        'sass'
    ]
}

因此，您的文件应如下所示：

module.exports = function (config) {
    config.set({
        basePath : __dirname + '/',
        browsers: ['Chrome'],
        singleRun: true,
        frameworks: ['mocha'],
        files: [
            'tests.webpack.js'
        ],
        preprocessors: {
            'tests.webpack.js': ['webpack']
        },
        reporters: ['dots'],
        webpack: {
            module: {
                loaders: [
                    {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
                    {
                        test: /\.scss$/,
                        exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
                        loaders: [
                            'style?sourceMap',
                            'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
                            'postcss',
                            'sass'
                        ]
                    }
                ]
            },
            watch: true
        },
        webpackServer: {
            noInfo: true
        }
    });
};

---

尝试将此行添加到您的karma配置中：

basePath : __dirname + '/',

这是Web包的scss加载程序：

{
    test: /\.scss$/,
    exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
        'postcss',
        'sass'
    ]
}

因此，您的文件应如下所示：

module.exports = function (config) {
    config.set({
        basePath : __dirname + '/',
        browsers: ['Chrome'],
        singleRun: true,
        frameworks: ['mocha'],
        files: [
            'tests.webpack.js'
        ],
        preprocessors: {
            'tests.webpack.js': ['webpack']
        },
        reporters: ['dots'],
        webpack: {
            module: {
                loaders: [
                    {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
                    {
                        test: /\.scss$/,
                        exclude: /[\/\\](node_modules|bower_components|public\/)[\/\\]/,
                        loaders: [
                            'style?sourceMap',
                            'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
                            'postcss',
                            'sass'
                        ]
                    }
                ]
            },
            watch: true
        },
        webpackServer: {
            noInfo: true
        }
    });
};

---

没有运气，相同的错误消息。我需要为“\uuu dirname”定义什么吗？实际上不需要<代码>\uuu dirname解析您所在的当前目录名y将更新我的答案，因为您缺少Web包模块的scss加载程序。现在我遇到以下错误：未捕获不变冲突：FindAllinRenderTree（…）：instance必须是tests.webpack.js:919的复合组件。让我上传tests.webpack.js。这是我的tests.webpack.js看起来像：var context=require.context（'./src'，true，/-test\.jsx？$/）；context.keys（）.forEach（context）；你的webpack.config在哪里？运气不好，同样的错误消息。我需要为“\uuu dirname”定义什么吗？实际上不需要<代码>\uuu dirname解析您所在的当前目录名y将更新我的答案，因为您缺少Web包模块的scss加载程序。现在我遇到以下错误：未捕获不变冲突：FindAllinRenderTree（…）：instance必须是tests.webpack.js:919的复合组件。让我上传tests.webpack.js。这是我的tests.webpack.js看起来像：var context=require.context（'./src'，true，/-test\.jsx？$/）；context.keys（）.forEach（context）；您的webpack.config位于哪里？