Edited at

Vue.jsでpug+Sassの環境設定(webpack)

More than 1 year has passed since last update.


はじめに

Vue.jsでスッキリしたコードで書きたかったのでpugとSassを使えるように環境構築しました。

最近はHTMLやCSSは他の言語で記述してHTMLやCSSにトランスパイルする手法が増えてきていますが、Vue.jsと併用できるとのことだったのでやってみました。


  • html => pug(旧名:Jade)

  • css => scss

ちなみにJavaScriptはECMAScriptの最新仕様(babelでトランスパイル)で記述したりTypeScriptで記述する方法があります。

babelでの導入についてはnpmパッケージまとめ(BrowserSync+webpack+babel)をご覧ください。

※Vue.jsとwebpackには深く触れていないので他の記事を参考にしてください。


参考


Vue.jsの導入


必要なパッケージ

vue

vue-loader


webpackの設定


webpack.config.js

// ...(省略)...

module: {
loaders: [
// ...(省略)...
{
test: /\.vue$/,
loader: 'vue'
}
]
},
// ...(省略)...


pugの導入


必要なパッケージ

pug-html-loader

vue-html-loader
vue-loader
vue-template-compiler


webpackの設定

設定なくて動いた


vueファイル


app.vue

<template lang="pug">

section.test
.test-child テキスト
.test-child
| テキスト
ul
li: a(href="#") アンカーテキスト
</template>


注意事項


  • pug-loaderはバグがあって動かなかった

  • Reactと同じくDOMのトップレベル(上記だとsection.test)は複数記述できない


    • Reactと違ってdiv要素以外も許容されている模様




参考


Sassの導入

SassはSCSS記法とSASS記法がありますが、CSSの記述と近いSCSS記法で導入しました。


パッケージ

css-loader

node-sass
sass-loader
vue-style-loader


webpackの設定


webpack.config.js

// ...(省略)...

module: {
loaders: [
// ...(省略)...
]
},
vue: {
loaders: {
scss: 'vue-style!css!sass'
}
},
// ...(省略)...


vueファイル


app.vue

<style lang="scss">

.test {
.test-child {
// ...(省略)...
}
}
</style>



参考