Mantine breakpoint variable worked but got annoyed error in vscode

[idindrakusuma]

Hi guys! Firstly, thank you for creating this awesome UI library! very appreciate it!

I wanna ask question.

I have CSS code like this and this is worked.

/* File: style.module.css  */
.bottom_navigation {
  display: none;

  @media (max-width: $mantine-breakpoint-xs)  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2);
  }
}

And this is my postcss.config.js

// File: postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

But I got error message like this in VScode

it isn't very pleasant. is it expected or any something I missed? Thanks!

[rtivital]

https://mantine.dev/getting-started/#set-up-vs-code

[idindrakusuma]

I missed that page 😅
it works. Thanks @rtivital

[SujalMatolia0]

i have created a new hook for media query and after using it so many time i am first time facing this error in the Carousel breakpoint so if anyone can help please respond asap.
thank you

[SujalMatolia0]