VuePress で Vuetify を使う #Vuetify

やりたいこと

VuePress で Vuetify を使いたい。ただし、全体にテーマを適用するのではなく、部分的に使いたい。

ぶつかった症状

yarn vuepress dev なら問題なく動作するのですが yarn vuepress build をした時に、上のポイントを抑えていないとうまく動きませんでした。

まだキッチリ原因を切り分けられていないので 自分固有の症状かもしれません。また、症状を完全に回復させておらず a タグのスタイルが漏れてしまっています。ただ、同じ内容で引っかかっている方がいらっしゃればと思い記載いたします。

バージョン

vuepress@0.14.11
vuetify@1.5.16

参考にしたサイト

以下のサイトを参考にさせていただきました。ただ、それでもいくらかハマったところがありました。

VuePressにVuetifyを導入

対策

SFC, シングルファイルコンポーネントを書く時に以下の３点に留意します。

scoped ではなくクラスを使う
less を使う
相対 import を使う

<template>
  <!-- 1. scoped は使わずクラスを使う -->
  <v-app class="vuetify-styles">
    ...
  </v-app>
</template>


<style lang="less">
  /* 2. less を使う */
  .vuetify-styles{
    /* 
       3. 絶対 import ではなく 相対 import を使う
       @import (less) '/node_modules/vuetify/dist/vuetify.min.css';
     */
    @import (less) '../../../node_modules/vuetify/dist/vuetify.min.css';
  }
</style>

原因

詳しいことが、全くわかっていません。原因があるなら yarn vuepress build でも問題が起こっていいはずですが、なぜか yarn vuepress dev では安定して動作してくれます。バグが起こっている背景はリンク先のコメントからなんとなく雰囲気だけ。

その１

そもそも Vuetify が global にスタイルを適用してしまう様子。

dearaw - Css conflict
@mgh87 Yes that's normal, Vuetify has global styles in it and will register them in <head> I'll try to create a Vuepress + Vuetify theme

How to isolate Vuetify global styles - Stackoverflow

scoped を外すと動作するのは自力で気づきました... orz

その２

Webpack もなんか問題を抱えている様子。

It would seem the problems comes from webpack rather than stylus itself or vuetify itself.
[Bug Report] stylus block level import not working - GitHub

less を使えばなんとか動作するよ、というのは以下のコメントで知りました。

I've used less here and it works for me.
[Bug Report] stylus block level import not working - GitHub

less の追加

yarn add -D less less-loader

How to use stylus block level import with Vuetify styles - Stackoverflow

scoped のつけ忘れ

.vuepress/components 配下で定義していた SFC が複数あったのですが、そのうちの１つに style に scoped をつけ忘れていたものがあって、それともこんがらがって、混沌に拍車が掛かっていました... orz