vue-cli 2.9.1 でのpug + sass環境構築

いろいろ最初に組み込まれて手順が減ってきていて、最近はこのぐらいで終わるようです。
vue事態のインストールなどは、他を参考ください。

• プロジェクトの構築(設定はすべてデフォルト)

$ vue init webpack vue-pug-sass

設定はすべてデフォルトでOKなのでエンターキーを連打で！

• npmのインストール

$ cd vue-pug-sass
$ npm install
$ npm install pug-html-loader --save-dev
$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev

追加するモジュールはこの3つだけでOK!あとは書くだけで利用出来ます。

• 初期コンポーネントの置き換え

<template lang="pug">
.hello
  h1 {{ msg }}
  h2 Essential Links
  ul
    li
      a(href='https://vuejs.org', target='_blank') Core Docs
    li
      a(href='https://forum.vuejs.org', target='_blank') Forum
    li
      a(href='https://chat.vuejs.org', target='_blank') Community Chat
    li
      a(href='https://twitter.com/vuejs', target='_blank') Twitter
    br
    li
      a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
  h2 Ecosystem
  ul
    li
      a(href='http://router.vuejs.org/', target='_blank') vue-router
    li
      a(href='http://vuex.vuejs.org/', target='_blank') vuex
    li
      a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
    li
      a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
$msg-color: #42b983;

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: $msg-color;
}
</style>

./src/components/HelloWorld.vue をpugとsassで書いた物です。
sassは変数を使って正しくコンパイルされているか確認しています。

$ npm run dev

デフォルトのページがpugとsassで書かれていてもしっかりと動いているのを確認してください。