material-kit: Carousel Cursor arrow-*.png Error Using Webpack

When compiling a project using this library the following error is shown and the build fails. This image is also not included in the assets path in this repository. Note: I removed the call to the .cur in the original version of this file. These images are also not located in the dev tools on the preview you provide.

Is there a resolution to this other than omitting the call to arrow-right and arrow-left?

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/assets/css/material-kit.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\mypath\src\assets\css\material-kit.css:11815:16: Can't resolve 'assets/img/arrow-right.png' in 'C:\mypath\src\assets\css'

  11813 |
  11814 | .carousel.carousel-full-nagivation .right {
  11815 |   cursor: url("assets/img/arrow-right.png"), default !important;
        |                ^
  11816 | }
  11817 |

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 1
Comments: 17 (2 by maintainers)

Most upvoted comments

issue still persists on v2.0.4, neither css/scss fails to compile due to ./img/arrow-left.cur missing asset. Since overriding in vendor is a crap & total illegitimate fix, the only solution seems to be forking and self fixing.

robertnenciu on Dec 2, 2019

@groovemen Why this simple bug is still not resolved?

mhrabiee on Jul 7, 2019

Hello @ewwwgiddings,

Thank you for your interest in working with our products, this issue is solved in the latest version (v2.0.4).

All the best, Stefan

Stefan,

Issue still not resolved. No arrow-* files in this location : https://github.com/creativetimofficial/material-kit/commits/master/assets/img

They were removed in this commit: https://github.com/creativetimofficial/material-kit/commit/a9f784e0d0384c7507c872fbcf1ccef7744dc8fd#diff-8302e6b7374cf560f39375b317bcdb9d

jtreminio on Oct 15, 2018

Hello there,

Until the next update, I will ask you to erase the code from variables/_carousel.scss

.carousel{
  &.carousel-full-nagivation{
    .left{
      cursor: url("../../img/arrow-left.png"), url("../../img/arrow-left.cur"), default !important;
    }
    .right{
      cursor: url("../../img/arrow-right.png"), url("../../img/arrow-right.cur"), default !important;
    }
  }
}

or you can integrate the files into your project (you can find them in the archive attached below) images.zip

Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

groovemen on Mar 25, 2019

One more thing, Lines 18 to 24 of material-kit.css should be

.carousel.carousel-full-nagivation .left {
  cursor: url("../img/arrow-left.png"), url("../img/arrow-left.cur"), default !important;
}

.carousel.carousel-full-nagivation .right {
  cursor: url("../img/arrow-right.png"), url("../img/arrow-right.cur"), default !important;
}

Note that in each of the four paths we go up one directory, not two.

KgotsoK on Jul 9, 2018

Hi @groovemen This issue is not resolved in my case.

Using the latest version (2.0.4)

I am using this library in an Angular app and am pulling the package using npm. I had a look in the material-kit folder and there are no arrow-right / arrow-left .cur and .png files. I have to download them myself but of course they get deleted next time I update.

I get them from here https://cdnjs.com/libraries/material-kit And note that thats version 1 of the lib.

KgotsoK on Jul 9, 2018

Hello @ewwwgiddings,

Thank you for your interest in working with our products, this issue is solved in the latest version (v2.0.4).

All the best, Stefan

groovemen on Jul 3, 2018