Bulma SASS variables?

[carcinocron]

How do you edit your bulma SASS variables in a way that works with nuxt?

_{This question is available on Nuxt.js community (#c109)}

[VonStruddle]

Using Buefy, I managed to do it like that:

Create a buefy.js file in the plugins directory:

import Vue from 'vue';
import Buefy from 'buefy';
// Volontarily omitted
// import 'buefy/lib/buefy.css';

Vue.use(Buefy);

Create an overrides.scss file in the assets directory, and import it in your app.scss file:
Overrides.scss

// Import Bulma's core
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';

// OVERRIDES GOES BETWEEN HERE...

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
$family-sans-serif: 'Nunito', sans-serif;

// Bulma colors
$primary: #0e637e;
$primary-invert: findColorInvert($primary);
$colors: ('primary': ($primary, $primary-invert));

// ... AND HERE

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

App.scss

@import 'overrides';

// Your custom scss goes there...

Then configure nuxt.config.js like that (the post-css options is for removing alerts):

build: {
    /*
     ** Run ESLint on save
     */
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        });
      }
    },
    vendor: ['buefy'],
    postcss: {
      plugins: {
        'postcss-custom-properties': false,
      },
    },
  },
  plugins: ['~/plugins/buefy.js'],
  css: [{ src: '~/assets/scss/app.scss', lang: 'scss' }],

[bigsee]

Just wanted to bump this one as I think it might still be an issue.

I have a similar file to @VonStruddle's overrides.scss called _bulma.scss and I import is into my main global styles app.scss.

I found that Bulma was overriding all my styles and I could not override the Bulma variables no matter what I tried. As soon as I ran

npm uninstall --save-dev @nuxtjs/bulma

...and removed the '@nuxtjs/bulma' from my modules, everything immediately worked as expected. Could this be a bug with the plugin somehow?

[wahidrahim]

can confirm ^

Uninstalling @nuxtjs/bulma and just using @import '~bulma/bulma'; in my global scss file worked as expected in setting bulma variables correctly.

[bigsee]

@wahidrahim thank you for confirming?

I wonder if anyone knows of any special reason why - or set-up with which - the plugin should not work. Is the plugin supposed work out of the box or is configuration required?

[simplenotezy]

How can I override bulma variables without using Buefy? @VonStruddle ?

[slidenerd]

@import '~bulma/sass/utilities/_all';
// Set your colors
$primary: #0075f2;
$primary-invert: findColorInvert($primary);
$twitter: #4099ff;
$twitter-invert: findColorInvert($twitter);
$danger: #ff595e;
$danger-invert: findColorInvert($danger);
$success: #8ac926;
$success-invert: findColorInvert($success);
$warning: #ffca3a;
$warning-invert: findColorInvert(#ffca3a);

// 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';

make a folder called styles , inside which make an app.scss, add this file to nuxt.config.js under css section as ['~/assets/styles/app.scss'] uninstall nuxt-bulma and install plain bulma with npm i bulma
@simplenotezy this is how to override bulma without buefy

[linxux]

For the app with @nuxtjs/style-resources,

  css: [
    { src: 'bulma/bulma.sass', lang: 'sass' },
    ...
   ],
  styleResources: {
    ...
    sass: ['~assets/css/vars/bulma-overrides.sass']
  },

[Ra1phM]

I solved it by replacing:

@import "~bulma/sass/utilities/_all.sass";

with:

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';

Then in nuxt.config.js:

css: [
    { src: '~assets/scss/main.scss', lang: 'sass' },
],
styleResources: {
    scss: ['~assets/scss/main.scss']
},

Also had to reinstall bulma using npm.

[bigsee]

@Ra1phM thanks for sharing! will give that a try next time