坑二： scss文件引入
vue 和 webpack升級之后，scss的引入方式有些變化，一些配置需要自己手動寫入，否則出錯。
官方文檔寫的很清楚了，只不過以前沒有仔細(xì)看。
總結(jié)：多看官方文檔Using Pre-Processors
具體記錄如下：
npm install sass-loader node-sass --save-dev 如果npm 安裝出錯，可以用從cnpm。

build/webpack.base.conf.js中修改rules:

/* 默認(rèn)代碼如下：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
}
*/
//  改為如下：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    }
  }
}

.vue中使用：

<style lang="sass">  / *  lang="scss" */
  /* write sass here */
</style>

引入外部 .scss 文件，需要：
npm install sass-resources-loader --save-dev
然后修改 build/utils.js 中 generateLoaders(loader, loaderOptions) 方法中的返回值，即 return 對象。

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/styles/index.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

注釋：
../src/styles/index.scss指定 scss文件路徑（ex：src/index.scss）。

推薦閱讀資料： [譯] Vue 2.0 的變化（一）之基本 API 變化