[sass] Undefined variable $grey-lighter

[Daniele-Tentoni]

I'm using those packages:

{
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.2.0",
    "bulma": "^0.9.4",
    "bulma-switch": "^2.0.4",
    "bulma-timeline": "^3.0.5"
  },
  "devDependencies": {
    "nuxt": "^3.0.0-rc.12",
    "sass": "^1.55.0",
    "sass-loader": "^10.3.1"
  }
}

with this configuration:

export default defineNuxtConfig({
    css: [
        "bulma",
        "bulma-switch",
        "bulma-timeline",
        "~/assets/styles/main.css",
        "@fortawesome/fontawesome-free/css/all.min.css",
    ],
});

So I expect that executing npm run dev start compilation of bulma.sass, bulma-switch.sass and bulma-timeline.sass and injecting build output. But compiler give me this error:

 ERROR  [sass] Undefined variable.                                                                                                                                                          12:18:12
  ╷
2 │ $timeline-marker-color: $grey-lighter !default
  │                         ^^^^^^^^^^^^^
  ╵
  node_modules/bulma-timeline/src/sass/index.sass 2:25  root stylesheet

I've see that in package.json of bulma-timeline package there's "bulma": "^0.9.3" and the var undeclared is $grey-lighter that is declared in the https://github.com/jgthms/bulma/blob/0.9.3/sass/utilities/derived-variables.sass file from that bulma dist.

I'm missing something in my toolchain?

Edit 1: I've already use rm -rf .nuxt .output dist node_modules and npm cache clean --force before install.

[ivnish]

I imported

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

and fixed this error (but get few new)