Documentation: How to change bulma's variables when using npm install

[dral]

I cannot figure out how to use bulma using npm in my node project, change a variable and building the corresponding css.

Is there a working example of a build command (using either node-sass or gulp-sass, or any build system) ?

I've tried the following

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssmin = require('gulp-cssmin');
var moduleImporter = require('sass-module-importer');

var AUTOPREFIXER_BROWSERS = [];

var sass = require('gulp-sass');

gulp.task('sass', function () {
 return gulp.src('styles/**/*.sass')
  .pipe(sourcemaps.init())
  .pipe(sass({
    outputStyle: 'expanded',
    importer : moduleImporter()
  }).on('error', sass.logError))
  .pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
  .pipe(cssmin())
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./build/'));
});

gulp.task('sass:watch', function () {
  gulp.watch('styles/**/*.sass', ['sass']);
});

which works for importing bulma

@import bulma

but generates an error for something like

@import bulma/config/variables

error:

Error in plugin 'sass'
Message:
    styles/style.sass
Error: File to import not found or unreadable: bulma/config/variables
       Parent style sheet: stdin
        on line 1 of stdin
>> @import "bulma/config/variables";
   ^

I've also tried using node-sass directly but I get the same kind of errors.

Thanks in advance for any help.

[Chariyski]

Hi @dral,

you can include the project in your main SASS file, and overwrite the variable you need with something like this:

@import "bulma/utilities/utilities"
@import "bulma/config/variables"
@import "bulma/config/generated-variables"

// Override variables here
// You can add new ones or update existing ones:

$blue: #72d0eb // Update blue
$pink: #ffb3b3 // Add pink
$family-serif: "Georgia", serif // Add a serif family

@import bulma/config/generated-variables

// Override generated variables here
// For example, by default, the $danger color is $red and the font is sans-serif
// You can change these values:

$danger: $orange // Use the existing orange
$family-primary: $family-serif // Use the new serif family

@import "bulma/base/base"
@import "bulma/elements/elements"
@import "bulma/components/components"
@import "bulma/layout/layout"

[dral]

Thank you. It worked using the full path (@import "node_modules/bulma/bulma/utilities/utilities"). However the question is about documenting a working build command / setup.

[Antrikshy]

I happen to have a similar problem, so I stumbled upon this. FYI I am new to Sass and might be doing something wrong here.

I'm using gulp-sass in my project, along with npm install bulma.

Problem 1: Not much of a problem, but I can't seem to import "bulma/base/base". The only way I can get it to work is by importing "node_modules/bulma/sass/base/base". Am I missing something here?

Problem 2: The real issue is that I can't seem to override $primary: $yellow. I see that the newest version of Bulma does not seem to include a generated-variables.sass, so I have the following:

@import "../node_modules/bulma/sass/utilities/utilities";

$family-primary: $family-monospace;
$primary: $yellow;

@import "../node_modules/bulma/sass/base/base";
@import "../node_modules/bulma/sass/elements/elements";
@import "../node_modules/bulma/sass/components/components";
@import "../node_modules/bulma/sass/layout/layout";

This updates the font family properly, but it does not set the primary color to yellow, at least in the case of hero's background color. Any ideas?

[samayo]

I am having similar problem, but in my case, I am not using sass/less/scss or any other css preprocessors. I just want to include bulma.css and work on my project, however I can't seem to change the default theme colors .... what should I do?

[mifas]

This is the easiest method. @import "~bulma/bulma.sass";

[dennisbaum]

@Antrikshy same issue with bulma v0.4.1 if i set the custom variables after importing the bulma-npm the colors wont update

i think that is because all vars in the bulma/utilities/variables.sass are set with !default ... if the variable has already been assigned to, it won’t be re-assigned ... https://robots.thoughtbot.com/sass-default

so i set the custom variables before the bulma npm-package and that works

// Custom Variables
$primary: green
$danger: red
$body-background: $primary

// Bulma Npm
@import "../../node_modules/bulma/bulma"

// Custom Bulma Classes
@import 'bulma/layout/hero'
@import 'bulma/layout/section'

@mifas @import "~bulma/bulma.sass"; does not work for me. what is the trick?

[jneuendorf]

@dennisbaum See https://webpack.js.org/loaders/sass-loader/#imports

[guategeek]

@Antrikshy

Your solution works, except that I can't use any of Bulma's variables in my custom variables section (in my case a different file I'm importing) because they are not defined yet. For example creating a new variable and setting is value to a bulma one:

$new-variable: $white

This will cause Yarn to throw an error. If I import Bulma first Yarn won't throw an error (the variable is in scope?) but none of my changes work.

[yann-yinn]

Hello, here is a working example i made yesterday, feel free to PR if it can be done better : https://github.com/nyl-auster/bulma-custom-build

[MalvinJay]

@import "~bulma"; also does an excellent work