Buefy

Buefy(Bulma) と github-markdown の共存

Markdownで記述したファイルをVueに取り込むことに成功しました。 ですが、Buefyを基本としたサイトになっているので、Reset CSSが有効なためMarkdownで出力されたh1など、CSS クラスではなくタグでレイアウトを表現したいものが無効になっています。 h1タグで大きくタイトルとして扱ってほしいのに通常の文章と変わりない仕上がりになってしまいます。 github の Markdown スタイルを使う まずは使いたい CSS 定義を持ってきます。 今回はsindresorhus/github-markdown-cssを利用させていただきます。 npmパッケージとして公開されているのでインストールします。 yarn add github-markdown-css インストールできたらnuxt.config.jsのcss項目に追加します。 Buefyのスタイルよりも優先させたいので、

Nuxt.jsでSCSSを使うとき、グローバルの変数を使う

コンポーネントやページでいちいち変数ファイルの依存を追加するのが面倒なので。 どこでも使えるように設定します。 依存ライブラリの追加 yarn add -D @nuxtjs/style-resources 変数定義 SCSS の用意 今回は~/assets/css/variables.scssに作成しました。 // Import Bulma's core @import '~bulma/sass/utilities/_all';

Episode

00:00:00 00:00:00