Javascript Karma webpack-无法在js中处理css导入

我正在编写一些学习项目来实现TDD，webpack

我将webpack 2与以下配置一起使用：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

process.noDeprecation = true;

module.exports = {

  entry: './src/js/index.js', 
  devtool: 'source-map', 
  context: __dirname,
  target: 'web', 
  stats: 'errors-only',
  watch: true,


  output: {
    path: path.resolve(__dirname, './dist'), 
    filename: 'js/[name].[chunkHash].js', 
    publicPath: '/', 
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],

        loader: 'babel-loader',

        options: {
          presets: ['es2015']
        },
      },
      {
        test: /\.css$/, 
        /*use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })*/
        use: [ 'style-loader', 'css-loader' ]

      }
    ]
  },

  plugins: [
    new WebpackMd5Hash(),
    //new ExtractTextPlugin('[name].[contenthash].css'),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],

  devServer: {
    contentBase: path.join(__dirname, "dist/"),
    compress: true,
    port: 8080
}

}

当我运行simply webpack时，它可以编译并运行良好。但当我尝试使用webpack预处理器运行karma时，它会出现以下错误：

Uncaught错误：模块解析失败：C:\Users\Javid\Desktop\projects\rejection\src\css\style.css意外标记（1:0）
您可能需要适当的加载程序来处理此文件类型。

我使用

import'../css/style.css'在我的js文件中。谷歌搜索了很多，没有找到解决方案

解决方案

我使用额外的原始加载程序来处理我的css，并将我的导入更改为这样：
import css from'raw loader/css/style.css'
参考：

这个网站展示了一个开发、测试和生产构建项目的好例子。特别是对于您的问题，在运行karma时，似乎使用了加载程序来忽略.css文件

以下是他们与业力相关的文件样本：

“karma.config.js”：

“karma.conf.js”：

“webpack.test.js”：

try:`use:[{loader:'style loader'}，{loader:'css loader'}]`没有帮助。我认为问题出在因果报应本身，但找不到什么。网页包本身运行正常。也许问题出在karma网页包预处理器上，但我不知道如何修复它。我将进一步了解它们的配置。但为什么你认为我的配置告诉我在运行karma时忽略css加载程序？我没有看到它，在他们的配置中也没有看到。我只是看到他们使用不同的加载程序（原始加载程序和空加载程序）。我会查这些，但现在没有什么意义。好吧，使用原始加载程序真的很有帮助。谢谢
module.exports = require('./config/karma.conf.js');

var webpackConfig = require('./webpack.test');

module.exports = function (config) {

        var _config = {
            basePath: '',

            frameworks: ['jasmine'],

            files: [
                {pattern: './config/karma-test-shim.js', watched: false}
            ],

            preprocessors: {
                './config/karma-test-shim.js': ['webpack', 'sourcemap']
            },

            webpack: webpackConfig,

            webpackMiddleware: {
                stats: 'errors-only'
            },

            webpackServer: {
                noInfo: true
            },

            reporters: ['kjhtml'],
            port: 9876,
            colors: true,
            logLevel: config.LOG_INFO,
            autoWatch: false,
            browsers: ['Chrome'],
            singleRun: true
        };

        config.set(_config);
    };

var webpack = require('webpack');
var helpers = require('./helpers');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('src', 'tsconfig.json') }
                    } , 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'

            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'null-loader'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: 'null-loader'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        )
    ]
}