Webpack Postcss-Loader：模块分析错误

Question

我正在尝试通过组合一个简单的项目来学习Webpack的更好点，而且我在加载样式表时遇到了问题。我正在使用Node v4.4.4和Webpack v1.13.1。

这是我的Webpack配置：

require("babel-polyfill");

const path              = require('path');
const srcPath           = path.join(__dirname, 'src');
const webpack           = require('webpack');
const nodeModulesPath   = path.join(__dirname, 'node_modules');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var atImport            = require('postcss-import');
var webpackPostcssTools = require('webpack-postcss-tools');
var map                 = webpackPostcssTools.makeVarMap('./src/styles/app.css');

module.exports = {
  // devtool: 'cheap-module-eval-source-map',
  devtool: 'eval',

  entry: [
    // Set up an ES6 environment
    'babel-polyfill',
    // For hot style updates
    'webpack/hot/dev-server',
    // The script refreshing the browser on non-hot updates
    'webpack-dev-server/client?http://localhost:8080',
    // Application entry point
    './src/styles/app.css',
    './src/index'
  ],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/, include: /src/, loaders: ['eslint']
      }
    ],
    loaders: [
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000' },
      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file'},
      { test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css?importLoaders=1!postcss-loader") 
        },
      { test: /\.js$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel',
        query: {
          presets: ['es2015']
        } 
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.css'],
    modulesDirectories: ["src", "node_modules"]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("[name].css")
  ],
  postcss: function(){ return [
    atImport({
      path: 'src/styles/app.css',
      addDependencyTo: webpack
    }),
    webpackPostcssTools.prependTildesToImports,
    require('postcss-custom-properties')({
        variables: map.vars
    }),
    require('postcss-custom-media')({
        extensions: map.media
    }),
    require('precss')(),
    // require('postcss-cssnext')(),
    require('postcss-reporter')(),
    // require('postcss-nested')(),
    require('postcss-responsive-type')(),
    require('postcss-font-magician')()
  ]},
  "scripts": {
    "start:dev": "webpack-dev-server --progress --colors --content-base src/"
  },
  devServer: {
    contentBase: "./src"
  }
}

我的index.js文件是一行：require('./styles/app.css');

这是我的app.css文件：

@import './_config.css';
@import './_ie.css';
@import './lib/index.css';
@import './base/index.css';
@import './layout/index.css';
@import './modules/index.css';
@import './states/index.css';

这是错误：

$ webpack --watch ./src/index.js ./public/bundle.js
Hash: 7d7eb727fa9ce93aed07
Version: webpack 1.13.2
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.66 kB       0  [emitted]  main
   [0] ./src/index.js 113 bytes {0} [built] [1 error]
   [1] ./src/styles/app.css 0 bytes [built] [failed]

ERROR in ./src/styles/app.css
Module parse failed: C:\Users\Will\Documents\_isaac\programming\postcss-template\src\styles\app.css Unexpected character '@' (12:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (12:0)
    at Parser.pp$4.raise (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.parse (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:515:10)
    at Object.parse (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\Users\Will\Documents\_isaac\programming\postcss-template\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
 @ ./src/index.js 2:0-27

导致此错误的原因是什么？我应该如何解决？