vue-cli,默认集成了postcss吗？

Question

我使用vue-cli创建了一个工程，然后修改APP.vue为：

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <img src="./components/coupon-ad.png">
    <img src="./components/buy-icon-0.png">
    <img src="./components/buy-icon.png">
    <router-view></router-view>
    <div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
#app
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .wrapper
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item
      width: 100px;
      height: 100px;
      border: 1px solid red;
      background-color: darkgreen;
</style>

运行：npm run build，生成了app.css

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px
}

#app .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

#app .wrapper .item {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-color: #006400
}

h1[data-v-56518d4b], h2[data-v-56518d4b] {
  font-weight: 400
}

ul[data-v-56518d4b] {
  list-style-type: none;
  padding: 0
}

li[data-v-56518d4b] {
  display: inline-block;
  margin: 0 10px
}

a[data-v-56518d4b] {
  color: #42b983
}

我没有配置postcss，看了下源码，最后调用了util.cssLoaders()，里面有以下代码：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

难道是这里的postcss起的作用吗？

Answer 1

这个函数generateLoaders()需要传递参数进去，才能添加loader，所以此处应该没有调用。至于是不是其他地方的原因，我还在寻找

Answer 2

Vue CLI uses PostCSS internally.

Answer 3

vue-cli 在项目创建的时候已经默认配置了postcss中的 autoprefixer 这个插件， Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。