Error in supportting PostCSS plugins

[AidanDai]

I do surely that, but error. adding-postcss-plugins

error

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/0.8.2/postcss-loader!./src/styles/App.css
G:\XMAPP\htdocs\resume\resume\src\styles\App.css:1:1: Unknown word
$color: red;
^

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/0.8.2/postcss-loader!./src/styles/App.css
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (G:\XMAPP\htdocs\resume\resume\node_modules\.npminstall\css-loader\0.23.1\css-loader\node_modules\postcss\lib\input.js:31:23)
    at parse (G:\XMAPP\htdocs\resume\resume\node_modules\.npminstall\css-loader\0.23.1\css-loader\node_modules\postcss\lib\parse.js:22:17)
    at new LazyResult (G:\XMAPP\htdocs\resume\resume\node_modules\.npminstall\css-loader\0.23.1\css-loader\node_modules\postcss\lib\lazy-result.js:61:24)
    at Processor.process (G:\XMAPP\htdocs\resume\resume\node_modules\.npminstall\css-loader\0.23.1\css-loader\node_modules\postcss\lib\processor.js:34:16)
    at processCss (G:\XMAPP\htdocs\resume\resume\node_modules\.npminstall\css-loader\0.23.1\css-loader\lib\processCss.js:188:11)
    at Object.module.exports (G:\XMAPP\htdocs\resume\resume\node_modules\.npminstall\css-loader\0.23.1\css-loader\lib\loader.js:24:2)
 @ ./src/styles/App.css 4:14-185 13:2-17:4 14:20-191
webpack: bundle is now VALID.

firstly, add options cfg/base.js, but it isn't work. I set option in default.js, because options are generated in default.js following when I try again.

cfg/default.js

'use strict';
const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;
function getDefaultModules() {
  return {
    preLoaders: [{
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: 'eslint-loader'
      }],
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
      },
      {
        test: /\.sass/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax'
      },
      {
        test: /\.scss/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded'
      },
      {
        test: /\.less/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'
      },
      {
        test: /\.styl/,
        loader: 'style-loader!css-loader!postcss-loader!stylus-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(mp4|ogg|svg)$/,
        loader: 'file-loader'
      }
    ]
  };
}
module.exports = {
  srcPath: srcPath,
  publicPath: '/assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules,
  postcss: function () {
    return [];
  }
};

add option

 require('precss')({/*options*/}),
      require('autoprefixer')({
        browsers: ['last 2 versions', 'ie >= 8']
      })

Did I understand that I was wrong？ if not, what is why? please help me!

[golinmarq]

Did you solve this?