Karma webpack - nicht CSS-Import in js

Question

Ich entwickle einige Lernprojekt behandeln TDD zu implementieren, webpack.

Ich benutze webpack 2 mit dem folgenden config:

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 
} 

} 

Wenn ich laufe einfach webpack es kompiliert und funktioniert einwandfrei. Aber wenn ich versuche Karma mit webpack Präprozessor zu laufen, es gibt die folgenden Fehler: 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.

Ich benutze import '../css/style.css'; in meiner js-Datei. Viel gegoogelt, keine Lösung gefunden.

Lösung

I verwendet Additionaly raw-loader meine CSS zu handhaben und änderte meinen Import wie folgt aussehen: import css from 'raw-loader!../css/style.css';

Answer 1

Referenz: https://angular.io/docs/ts/latest/guide/webpack.html

Diese Seite ein gutes Beispiel für eine zeigt Projekt für Entwicklung, Test und Produktion. Insbesondere für Ihre Frage sieht es so aus, als würde ein Loader verwendet, um die CSS-Dateien beim Ausführen von Karma zu ignorieren. Hier

ist ein Beispiel für ihre Dateien Karma bezogen werden:

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