VuePress で SCSS と Pug を利用する
VuePress で SCSS と Pug を利用する
導入
SCSS を使えるように
sass-loader と node-sass をインストールする。
npm を使う場合
$ npm i -D sass-loader node-sass
yarn を使う場合
$ yarn add -D sass-loader node-sass
Pug を使えるように
pug と pug-plain-loader をインストールする。
npm を使う場合
$ npm i -D pug pug-plain-loader
yarn を使う場合
$ yarn add -D pug pug-plain-loader
使ってみる
コンポーネントを作成する。
<!-- src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue -->
<template lang="pug">
.pug-sample
.pug-text pug
</template>
<style lang="scss" scoped>
.pug-sample {
.pug-text {
color: #ffffff;
font-size: 100px;
text-align: center;
background: #000000;
}
}
</style>
呼びたい Markdown ファイルで、作成したコンポーネントを呼んでみます。
<!-- src/_posts/2019-01-26/vuepress-add-scss-and-pug.md -->
<Blog-2019-01-26-ScssAndPug />
結果
失敗したところメモ
試す途中でつまったところを残しておきます。
失敗 1
以下のような名前でコンポーネントを作成して、
src/.vuepress/components/2019-01-26/ScssAndPug.vue
Markdown で呼び出してみました。
<!-- src/_posts/2019-01-26/vuepress-add-scss-and-pug.md -->
<2019-01-26-ScssAndPug />
すると、Chrome のデベロッパーツールのコンソールに以下のエラーが表示され、
[Vue warn]: Invalid component name: "2019-01-26-ScssAndPug". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.
<!-- Google翻訳結果 -->
コンポーネント名には英数字とハイフンのみを含めることができ、英字で始める必要があります
コンポーネントが表示されませんでした。
アルファベット以外で始まる単語を使ってコンポーネントを作ってしまったのが原因でした。
修正
以下のように数字で始まっていたコンポーネント名を修正することで、 エラーが消え、無事コンポーネントを表示することができました。
- src/.vuepress/components/2019-01-26/ScssAndPug.vue
+ src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue
- <2019-01-26-ScssAndPug />
+ <Blog-2019-01-26-ScssAndPug />
失敗 2
<!-- src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue -->
...
<style lang="sass" scoped>
...
上記のように書くと以下のようなエラーが表示されました。
ERROR in ./src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue?vue&type=style&index=0&id=5b6e8cc0&lang=sass&scoped=true& (./node_modules/css-loader??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--11-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--11-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue?vue&type=style&index=0&id=5b6e8cc0&lang=sass&scoped=true&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
.pug-sample {
^
Invalid CSS after ".pug-sample {": expected "}", was "{"
in /Users/xxxx/hene/src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue (line 7, column 14)
@ ./src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue?vue&type=style&index=0&id=5b6e8cc0&lang=sass&scoped=true& (./node_modules/vue-style-loader!./node_modules/css-loader??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--11-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--11-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue?vue&type=style&index=0&id=5b6e8cc0&lang=sass&scoped=true&) 4:14-503 14:3-18:5 15:22-511
@ ./src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue?vue&type=style&index=0&id=5b6e8cc0&lang=sass&scoped=true&
@ ./src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue
@ ./node_modules/@vuepress/core/.temp/app-enhancers/global-components-1.js
@ ./node_modules/@vuepress/core/.temp/internal/app-enhancers.js
@ ./node_modules/@vuepress/core/lib/app/app.js
@ ./node_modules/@vuepress/core/lib/app/clientEntry.js
@ multi ./node_modules/@vuepress/core/lib/app/clientEntry.js
これは、自分が Sass ではなく、SCSS の記法で書いていたためでした。
修正
SCSS を使うことを以下のように指定することで、きちんと動くようになりました。
<!-- src/.vuepress/components/Blog-2019-01-26/ScssAndPug.vue -->
...
- <style lang="sass" scoped>
+ <style lang="scss" scoped>
...
