Bulma: index out of bounds

[stewones]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.6.2]
This is a Sass issue: I'm using latest Ionic

Description

just cant run with Ionic

Steps to Reproduce

1. setup an ionic environment with a sample app
2. npm install --save bulma
3. on app.scss import bulma

@import "node_modules/bulma/sass/utilities/_all";
@import "node_modules/bulma/sass/grid/columns";
@import "node_modules/bulma/sass/layout/hero";
@import "node_modules/bulma/sass/elements/progress";
@import "node_modules/bulma/sass/components/modal";

1. run ionic serve

Expected behavior

compile

Actual behavior

index out of bounds for nth($list, $n)

[jgthms]

What’s in your $colors variable map?

[stewones]

what comes with ionic.
variables.scss

$colors: (
  primary:    #2a7dc2,
  secondary:  #32db64,
  danger:     #f53d3d,
  dark:       #222,
  white:    #fff,
  light: (
    base: #242424,
    contrast: #f4f4f4
  )
);

[stewones]

it would be great if bulma had your own color variable name..

[stewones]

https://github.com/jgthms/bulma/issues/1482

[farhatamiine]

@stewwan did u figure out how to use it

[dkushner]

Currently having the same issue with the following color map:

$brand-colors: (
  "orange": ($orange, $orange-invert),
  "orange-light": ($orange-light, $orange-light-invert),
  "red": ($red, $red-invert),
  "blue-dark": ($blue-dark, $blue-dark-invert),
  "yellow": ($yellow, $yellow-invert),
  "yellow-light": ($yellow-light, $yellow-light-invert),
  "green": ($green, $green-invert),
  "green-light": ($green-light, $green-light-invert),
  "teal": ($teal, $teal-invert),
  "teal-light": ($teal-light, $teal-light-invert),
  "grey": ($grey, $grey-invert),
  "grey-dark": ($grey-dark, $grey-dark-invert),
  "grey-darker": ($grey-darker, $grey-darker-invert)
);

Does anyone have any advice on this? Getting the following:

Module build failed: 
    $color-invert: nth($pair, 2)
                  ^
      Index out of bounds for `nth($list, $n)`

[EresDev]

Similar issue.

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/sty
les.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                  ^
      Index out of bounds for `nth($list, $n)`
      in E:\Google Drive\PhpStorm\Projects\EresNote\src\styles\bulma\sass\elements\button.sass (line 113, column 20)

[EresDev]

My problem is solved. I also accidentally included bootstrap with bulma in scss (because I was working with bootstrap before bulma). When I removed bootstrap scss, I am not getting this error anymore.

[hsu-w]

to solve this problem you have to edit sass/utilities/derived-variables.sass

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default;
to
$colors-pre: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default;

$colors: $colors-pre;

problem solved!

[mfranzke]

As the solution targets overwriting the $colors SCSS "array", that has been defined in ionics files (or in other words: out of bulma), which wouldn't happen due to bulmas correct usage of the !default declaration, it seems like another solution w/o editing the bulma library files directly (would harm updates etc.), you could even also use the following declaration before including the bulma.scss file within your project:
$colors: null;

e.g. using the declarations you've mention in your description:

/*
The following declaration would overwrite the $colors variable defined
in other files included previously, which is used by bulma as well
Use for any further variables that are causing conflicts accordingly
*/
$colors: null;

@import "node_modules/bulma/sass/utilities/_all";
@import "node_modules/bulma/sass/grid/columns";
@import "node_modules/bulma/sass/layout/hero";
@import "node_modules/bulma/sass/elements/progress";
@import "node_modules/bulma/sass/components/modal";