# VuePress で SCSS と Pug を使う

# 導入

# SCSS を使えるように

sass-loadernode-sass をインストールする。

# npm を使う場合

$ npm i -D sass-loader node-sass

# yarn を使う場合

$ yarn add -D sass-loader node-sass

# Pug を使えるように

pugpug-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 />

# 結果

pug

# 失敗したところメモ

試す途中でつまったところを残しておきます。

# 失敗 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>
...

# 参考