Karma webpack - js에서 CSS 가져 오기를 처리 할 수 ​​없습니다.

Question

TDD, 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 
} 

} 

나는 그것을 컴파일하고 잘 작동 단순히 웹팩 실행합니다. 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 파일에 import '../css/style.css';를 사용 : 나는 웹팩 전처리와 카르마를 실행하려고하면, 그것은 다음과 같은 오류를 제공합니다. 그것을 많이 봤 거든, 해결책을 찾지 못했습니다.

솔루션

내 CSS를 처리 할 수 ​​additionaly 원시 로더를 사용하고 같이 내 수입을 변경

: import css from 'raw-loader!../css/style.css';이

Answer 1

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

이 사이트는의 좋은 예를 보여줍니다 개발, 테스트 및 프로덕션 빌드를위한 프로젝트 귀하의 질문에 특히 로더가 카르마를 실행할 때 .css 파일을 무시하는 데 사용되는 것처럼 보입니다. "

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

:

"karma.config.js ":

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

"karma.conf.js "여기

카르마에 관한 자신의 파일의 샘플입니다 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 
     ) 
    ] 
}