Customizing Beufy / Bulma in Nuxt

solution

create global styles in ~/css/main.scss and modify variables before importing Bulma files. Than add it in nuxt.config.js

@import '~bulma/sass/utilities/_all';
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your colors
$primary: #8c67ef;
$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
  )
);
$gap : 32px;
$body-size :16px;
$body-font-size	:1em;
html,body{
  @media screen and (max-width: 768px)  {
     
    font-size:14px !important;  
  }

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

$family-sans-serif: 'Nunito', sans-serif;
$family-primary: $family-sans-serif;
$family-secondary: $family-sans-serif;



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

...
  loading: { color: '#ff0000' },
  /*
   ** Global CSS
   */
  css: ['~/css/main.scss'],
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }
  },
...