카르마 실패 - 모듈 구문 분석 실패

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에 웹팩 = 필요 ('웹팩');

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

내 문제를 해결하기위한 아이디어가 있으십니까? 저에게 알려주세요. 거대한 감사

Answer 1

시도는 카르마 구성에 다음 행을 추가합니다

basePath : __dirname + '/', 

이것은 웹팩에 대한 SCS들 로더 :

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