使用vue-cli腳手架新建了一個以webpack模版的項目，想在單組件的項目中使用postcss書寫css，在vue-loader.conf.js中引用了postcss-cssnext與precss

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  postcss: [require('postcss-cssnext')(), require('precss')()]
}

測試使用postcss-cssnext時是有效的，但是用precss嵌套書寫的時候就報錯

<template lang="pug">
  #app
    router-view
</template>

<script>
  export default {
    name: 'app'
  }
</script>

<style lang="postcss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: gray(85);
    margin-top: 60px;
    img {
      color: gray(60);
    }
  }
</style>

錯誤信息：

Module build failed: TypeError: after.after is not a function
    at F:\www\yq\node_modules\_postcss-nested@2.1.0@postcss-nested\index.js:71:19
    at Rule.each (F:\www\yq\node_modules\_postcss@5.2.17@postcss\lib\container.js:114:22)
    at processRule (F:\www\yq\node_modules\_postcss-nested@2.1.0@postcss-nested\index.js:66:10)
    at F:\www\yq\node_modules\_postcss-nested@2.1.0@postcss-nested\index.js:101:17
    at Root.each (F:\www\yq\node_modules\_postcss@5.2.17@postcss\lib\container.js:114:22)
    at process (F:\www\yq\node_modules\_postcss-nested@2.1.0@postcss-nested\index.js:99:14)
    at LazyResult.run (F:\www\yq\node_modules\_postcss@5.2.17@postcss\lib\lazy-result.js:274:20)
    at LazyResult.asyncTick (F:\www\yq\node_modules\_postcss@5.2.17@postcss\lib\lazy-result.js:189:32)