やりたいこと
VuePressでComponentを作るときにpugとsassを使えるようにしたい。
導入手順
1. 必要なパッケージのインストール
pug
$ yarn add -D pug pug-plain-loader公式ドキュメントに従って,pugとpug-plain-loaderをインストールしていきます。
sass
$ yarn add -D sass-loader node-sass同じく,公式ドキュメントに従って,sass-loaderとnode-sassをインストールしていきます。
2. コンポーネントを作成する
コンポーネント(.vueファイル)のtemplateタグにlang="pug"属性を付与することでpugがvueコンポーネントないで使えるようになります。
同じようにstyleタグにlang="scss"属性を付与することでsassが使えるようになります。
今回は｢VuePressでアイキャッチのコンポーネントを作ってみる｣で作ったコンポーネントをpugで置き換えてみます。
<template lang="pug">
div
img.eyeCatchPic__img(v-bind:src="eyeCatchPic")
h1 {{ articleTitle }}
</template>
<script>
// (略)
</script>
<style lang="scss">
.eyeCatchPic__img {
border-bottom: 1px solid #eee;
}
</style>sassを使う場合,lang属性の値としてsassとscssでは記述の仕方が変わるので注意しましょう。
メジャーなのはscssの方だと思うのでややこしいですが間違えないようにしましょう。
まとめ
以上です。
めちゃくちゃ簡単ですね。
自分でGulpfileを書かなくても,いつもどおりローカルサーバを立ち上げておくだけで自動リロードもしてくれるので楽ちんです。
それではまた明日。