When load image via binding attribute, scss error occure.

[webdeveloper0429]

in order to load images dynamically I used below code

<img :src="require('@/assets/' + sliderItem.src)" />

so that images are loaded correctly but in this case unexpected scss error shows.

./src/assets/sass/custom/dropdowns.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/sass/custom/dropdowns.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
4 │     height: $navbar-height;
  │             ^^^^^^^^^^^^^^
  ╵
  /usr/src/app/src/assets/sass/custom/dropdowns.scss 4:13  root stylesheet

actually scss works well without image binding(above code)

any idea?