カルマwebpack - jsのCSSインポートを処理できません

Question

私はTDD、webpackを実装するいくつかの学習プロジェクトをコーディングしています。

私は、次の設定で2 WebPACKの使用

：私は単にそれをコンパイルし、正常に動作しますWebPACKを実行すると

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 
} 

} 

。しかし、webpackプリプロセッサでカルマを実行しようとすると、次のエラーが発生します。 Uncaught Error: Module parse failed: C:\Users\Javid\Desktop\projects\rejection\src\css\style.css Unexpected token (1:0) You may need an appropriate loader to handle this file type.

私はをjsファイルに使用しています。それをたくさんグーグル、解決策を見つけることができませんでした。

ソリューション

私は自分のCSSを処理するためにadditionaly生・ローダーを使用して、このように見えるために私のインポートを変更：import css from 'raw-loader!../css/style.css';

Answer 1

参考：https://angular.io/docs/ts/latest/guide/webpack.html

このサイトはの良い例を示しています開発、テスト、およびプロダクションビルド用のプロジェクトです。あなたの質問に特に、カルマを実行するときにローダーが.cssファイルを無視するために使用されるように見えます。ここで

はカルマに関連する自分のファイルのサンプルです：

"karma.config.js"：

module.exports = require('./config/karma.conf.js'); 

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

」 webpack.test.js "：

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