基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

这里以原项目模板的postcss插件autoprefixer为例说明：

1.为了便于测试，对首页做一些调整：
增加index.css

.postcss_test {
    transform: rotate(3deg);
}

修改如下图：

修改index.js

修改index.html

<div id="app">
    <app></app>
    <h1 class="postcss_test">postcss-autoprefixer</h1>
</div>

修改结果如下：

2.便于对比，对Hello.vue添加样式

<style scoped>
......
h1 {
  transform: rotate(3deg);
}
......
</style>

修改如下：

3.分别启动项目查看样式对比和打包后样式对比：

可以看出原模板的postcss插件只对组件起作用，不对页面起作用

4.安装postcss-loader并修改build/utils.js的配置

$ npm install  postcss-loader -D

function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      ......
      loaders.splice((loaders.length - 1), 0, 'postcss-loader')
    }else {
      loaders.push('postcss-loader')
    }
    ......
  }

PS：2017.07.30补充
================= start ==================
以上配置时postcss-loader的版本为1.3.3
若postcss-loader的版本为2.0.0-2.0.2，以上配置会报错，

Module build failed: TypeError: Cannot create property 'prev' on boolean 'false'
at Promise.resolve.then.then
2.0.3及以上版本要报warning：

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map enterily for performance reasons.
See https://github.com/postcss/po... for more information

2.0.3及以上版本需重新配置：

function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    var postcssLoader = {
      loader:  'postcss-loader',
      options: {
        sourceMap: true
      }
    }
    if (loader) {
      ......
      loaders.splice((loaders.length - 1), 0, postcssLoader)
    }else {
      loaders.push(postcssLoader)
    }
    ......
  }

================= end ==================

2017.08.10补充
================= start ==================
关于flex在打包后没有diaplay: -webkit-flex;兼容性前缀
处理方案如下：

# package.json
"browserslist": [
    "last 5 versions"
  ]

================= end ==================

5.如果需要用到css的预编译，这里以sass为例，安装相应的插件即可：

$ npm install sass-loader node-sass -D

6.把index.css改为index.scss并用sass语法写样式，同时修改Hello.vue如下：
在style标签上添加：lang="scss"

<style scoped lang="scss">
......
.hello {
  h1 {
    transform: rotate(3deg);
  }
}
......
</style>

7.涉及到vue组件的设置，请参考文档：vue-loader，中文文档

2017.03.21补充：感谢Wall的提醒
上面关于style的lang属性，如果使用sass语法，也可以lang="sass"
在官方文档帮助手册里面说明了这个问题：

lang="scss" corresponds to the CSS-superset syntax (with curly braces and semicolones).
lang="sass" corresponds to the indentation-based syntax

关于sass和scss格式的区别，可参考官方文档