Error: Undefined variable after importing `@skyscanner/backpack-web/bpk-mixins`

[Namnika]

Hi, I just faced an issue with an undefined variable using the bpk-mixins package. I am using VSCode and installed sass globally on my PC due to the unstability reasons of node-sass. Here is the reason.

Here is what the error looks like:

App.scss
--------------------
Compilation Error
Error: Undefined variable.
   ╷
12 │     padding: $bpk-spacing-lg * 2;
   │              ^^^^^^^^^^^^^^^
   ╵
  d:\backpack-react-web-app\src\App.scss 12:14  root stylesheet
--------------------
Watching...
--------------------

my below snippets:

• App.scss

@use '~@skyscanner/backpack-web/bpk-mixins';

@mixin container {
  max-width: $bpk-breakpoint-desktop;
  margin: 0 auto;
}

.App {
  text-align: center;

  &__header {
    padding: $bpk-spacing-lg * 2;
    background-color: $bpk-color-sky-blue;
    background-image: $bpk-primary-gradient;
    color: $bpk-color-white;

    @include bpk-box-shadow-sm;

• package.json

{
  ...
  "dependencies": {
    "@skyscanner/backpack-react-scripts": "11.1.1",
    "@skyscanner/backpack-web": "^34.16.0",
    "@skyscanner/cra-template-backpack": "0.0.9",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
...

OS Enivronment:- Win 11 Node: v18.20.2 npm: 10.8.2

Any solution? How to solve this?

Thank you!

[olliecurtis]

Hey @Namnika

Thanks for reaching out. The error you are facing is due to these tokens no longer exist and our spacing now exists as functions instead.

So what you would need to do instead would be

padding: bpk-spacing-lg() * 2;

As this method allows us to make things configurable and changeable in the future. Our full list can be found here with their values: backpack spacing tokens

Thanks Backpack Team

[Namnika]

Hi @olliecurtis

Thank you so much for your reply! I already found this solution to solve this problem as you said.

Thank you. My issue is resolved.

Regards, Namnika

[olliecurtis]

Brilliant to hear its all working for you now!

Have fun and happy coding!

Thanks Ollie

[Namnika]

Actually, I found this issue while using this file https://github.com/Skyscanner/cra-template-backpack/blob/main/template/src/App.scss in cra-template.

Can I contribute to this issue?

Thank you.

Regards, Namnika

[saikrishna01301]

Hello Namnika,

I'm having trouble with the Skyscanner job simulation installation. Despite trying for the past three days, I'm still encountering errors. Could you please assist me with this issue?

Thank you!

[zawyehtoo]

Finally, I solved the errors. Thanks, @olliecurtis