のWebPACKのCSS「にSyntaxError：予期しないトークン{」

Question

私はこれらのローダーと私のCSSファイルをパックするのWebPACKを設定しようとしている、WebPACKのに新たなんだ：

'use strict'; 
require('./hosted/.tmp/styles/test.css'); 

module.exports = { 
    devtool: 'eval-source-map', 
    entry: { 
     js: './hosted/.tmp/scripts/script*.js' 
    }, 
    output: { 
     path: __dirname + './hosted', 
     filename: 'dcae-bundle.js' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.css$/, loader: "style-loader!css-loader"} 
     ] 
    } 
}; 

私は次で一つだけのファイルtest.cssを持っています：WebPACKのを実行している場合

body,html{height:100%} 

、私はエラーを取得しています：

C:\Development\Angular\Others\PounchOut\dcaeapp\hosted\.tmp\styles\test.css:1 
(function (exports, require, module, __filename, __dirname) { body,html{height:100%} 
                   ^
SyntaxError: Unexpected token { 
    at exports.runInThisContext (vm.js:53:16) 
    at Module._compile (module.js:404:25) 
    at Object.Module._extensions..js (module.js:432:10) 
    at Module.load (module.js:356:32) 
    at Function.Module._load (module.js:313:12) 
    at Module.require (module.js:366:17) 
    at require (module.js:385:17) 
    at Object.<anonymous> (C:\Development\Angular\Others\PounchOut\dcaeapp\webpack.config.js:3:1) 
    at Module._compile (module.js:425:26) 
    at Object.Module._extensions..js (module.js:432:10) 

問題は何ですか？事前

Answer 1

で

おかげで私は、ファイルへのパスを必要と使用する必要はありません 、問題を発見しました。 これは最終的なweb.configです。

'use strict'; 

module.exports = { 
    devtool: 'eval-source-map', 
    entry: { 
     js: ['./hosted/.tmp/scripts/scripts.js','./hosted/.tmp/styles/main.css'] 
    }, 
    output: { 
     path: __dirname + '/hosted', 
     filename: 'dcae-bundle.js' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.(js|jsx)$/, loaders: ['babel-loader'], exclude: /node_modules/}, 
      {test: /\.css$/, loader: "style-loader!css-loader"}, 
     ] 
    } 
};