2019-05-26に更新

nuxt-buefyの色をBulmaのデフォルトと同じにする

Nuxt.jsでBuefyを使うためにnuxt-buefyを入れると、Buefyでテーマカラーが変更されているためBulmaとは違う色になってしまう。それをBulmaのデフォルトの色にする方法。

まずnuxt.config.jsにてnuxt-buefyを読み込んでいるところで、オプションを使ってBuefyのCSSを読み込まないようにする。

    ['nuxt-buefy', { css: false }],

あとはひとまずデフォルトの色を定義したvariables.scssのようなものを作っておく。

$primary: hsl(171, 100%, 41%) !default;

$info: hsl(204, 86%, 53%) !default;
$success: hsl(141, 71%, 48%) !default;
$warning: hsl(48, 100%, 67%) !default;
$danger: hsl(348, 100%, 61%) !default;

$light: hsl(0, 0%, 96%) !default;
$dark: hsl(0, 0%, 21%) !default;

最後にapp.scssの先頭でこれとBuefyのscssをimportする。

@import 'variables';
@import '~buefy/src/scss/buefy-build.scss';

細かい部分はチェックできていないがこれでなんとなくデフォルトのBulmaの色っぽくなった。


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント