Topic

Bulma

A collection of 2 issues

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のスタイルよりも優先させたいので、後に記述します。 // githubのスタイルはbuefyよりも後に指定する export default { css: ['~/asse
1 min read

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

コンポーネントやページでいちいち変数ファイルの依存を追加するのが面倒なので。 どこでも使えるように設定します。 依存ライブラリの追加 yarn add -D @nuxtjs/style-resources 変数定義 SCSS の用意 今回は~/assets/css/variables.scssに作成しました。 // Import Bulma's core @import '~bulma/sass/utilities/_all'; $primary: #10abd0; $primary-invert: findColorInvert($primary); $twitter: #4099ff; $twitter-invert: findColorInvert($twitter); // 以下続く。。。 nuxt.config.js の編集 使用モジュール、設定をそれぞれ追加します。 // nuxt.config.js export default
1 min read

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe