はじめに
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>