buefy関連のメモ

buefy

開発にあたってbuefyを使って画面を構築していくことにしたため
画面の構築や必要なものなどメモしていく

buefyでscssを扱えるようにする

sassをインストールする

npm i -D sass-loader node-sass

基本設定のカスタマイズ

client/assets/scss/style.scss

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #23748B;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  "white": ($white, $black),
  "black": ($black, $white),
  "light": ($light, $light-invert),
  "dark": ($dark, $dark-invert),
  "primary": ($primary, $primary-invert),
  "info": ($info, $info-invert),
  "success": ($success, $success-invert),
  "warning": ($warning, $warning-invert),
  "danger": ($danger, $danger-invert),
  "twitter": ($twitter, $twitter-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

scssを読み込めるように定義する

nuxt.config.js

/*
 ** Global CSS
 */
css: [
  '@/assets/scss/style.scss', // buefyのベース定義のファイルを読み込む
],

/*
 ** Nuxt.js modules
 */
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  "@nuxtjs/axios",

  // github: https://github.com/chimurai/http-proxy-middleware
  "@nuxtjs/proxy",

  // Doc: https://buefy.github.io/#/documentation
  ['nuxt-buefy', { css: false, materialDesignIcons: false }],
],

FontAwesomeをインストール

npm install @fortawesome/fontawesome-free-webfonts

nuxt.config.js

css: [
  '@/assets/scss/style.scss', // buefyのベース定義のファイルを読み込む
  '@fortawesome/fontawesome-free-webfonts',
  '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
  '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
  '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],

実際に触ってみて

業務システムや管理系画面デザインに要求がない場合などはCSSフレームワークは良さそう
色などの変更レベルではいいけど、デザインなどの変え方が複雑っぽいので
グリッドシステムなどのレイアウト定義や使えそうな部品を採用するって感じが良さそうかも