カルマが失敗しました - モジュール解析が失敗しました

Question

reactJsアプリケーションでカルマ・ランナーでモカ・フレームワークを使用しようとしています。 何らかの理由で、私は次のエラーメッセージがあります。すべては私にはかなり新しいですので

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 =必要（ 'WebPACKの'）;

module.exports = function (config) { 
    config.set({ 
     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'} 
       ] 
      }, 
      watch: true 
     }, 
     webpackServer: { 
      noInfo: true 
     } 
    }); 
}; 

私の問題を解決するためのアイデアはありますか？私にお知らせください。

basePath : __dirname + '/', 

、これはWebPACKのためSCSSローダーです： 巨大なおかげで

Answer 1

は、あなたのカルマの設定に次の行を追加してみ

{ 
    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 
     } 
    }); 
};