使用vue-cli新建webpack项目时如何使用postcss，及postcss相关插件

Question

使用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)

Answer 1

webpack 1.0 的less 写法!!! 和你的那个postcss一样的东西

{
    test : /\.(less|css)$/,
    loader: ExtractTextPlugin.extract('style', 'css!less')
},

Answer 2

两个插件的顺序换一下