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の色っぽくなった。