基於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格式的區別，可參考官方文檔