1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB-Angular PRO Install errors

Atha pro asked 5 years ago

Hi there, I am having an issue with the install/run of MDB Pro on Angular 6. I have listed the error message below:

WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)(Emitted value instead of an instance of Error) postcss-url: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:267:2: Can\'t read file \'/Users/jonathan/Sites/websites/thepacificdifference-v2/img/lightbox/default-skin.png\', ignoring

WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)(Emitted value instead of an instance of Error) postcss-url: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:280:4: Can\'t read file \'/Users/jonathan/Sites/websites/thepacificdifference-v2/img/lightbox/default-skin.svg\', ignoring

WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)(Emitted value instead of an instance of Error) postcss-url: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:589:4: Can\'t read file \'/Users/jonathan/Sites/websites/thepacificdifference-v2/img/lightbox/preloader.gif\', ignoring

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)(Emitted value instead of an instance of Error) CssSyntaxError: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:267:14: Can\'t resolve \'../img/lightbox/default-skin.png\' in \'/Users/jonathan/Sites/websites/thepacificdifference-v2/src\'

265 | .pswp__button--arrow--left:before,
266 | .pswp__button--arrow--right:before {
> 267 |   background: url(../img/lightbox/default-skin.png) 0 0 no-repeat;      |              ^
268 |   background-size: 264px 88px;  269 |   width: 44px;

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)(Emitted value instead of an instance of Error) CssSyntaxError: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:280:22: Can\'t resolve \'../img/lightbox/default-skin.svg\' in \'/Users/jonathan/Sites/websites/thepacificdifference-v2/src\'
278 |   .pswp--svg .pswp__button--arrow--left:before,
279 |   .pswp--svg .pswp__button--arrow--right:before {
> 280 |     background-image: url(../img/lightbox/default-skin.svg);      |                      ^
281 |   }
282 |   .pswp--svg .pswp__button--arrow--left,

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)(Emitted value instead of an instance of Error) CssSyntaxError: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:589:16: Can\'t resolve \'../img/lightbox/preloader.gif\' in \'/Users/jonathan/Sites/websites/thepacificdifference-v2/src\'
587 |   .pswp__preloader__icn {
588 |     /* We use .gif in browsers that don\'t support CSS animation */
> 589 |     background: url(../img/lightbox/preloader.gif) 0 0 no-repeat;      |                ^
590 |   }
591 | }

I temporarily solved this by commenting out the following in mdb.scss

// @import \"pro/lightbox\";

However, this will not work for us in deployment.

Can anyone help me determine how can we resolve this issue without modifying node files?

-- NORMAL --

Atha pro answered 5 years ago

Thanks, Unfortunately, I tried your solution this morning and it still did not work. Strange that this issue has not arisen before. I have experienced the issue on multiple computers, and multiple installs.   WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) postcss-url: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:267:2: Can't read file '/Users/jonathan/Sites/websites/thepacificdifference-v2/img/lightbox/default-skin.png', ignoring WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) postcss-url: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:280:4: Can't read file '/Users/jonathan/Sites/websites/thepacificdifference-v2/img/lightbox/default-skin.svg', ignoring WARNING in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) postcss-url: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:589:4: Can't read file '/Users/jonathan/Sites/websites/thepacificdifference-v2/img/lightbox/preloader.gif', ignoring ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:267:14: Can't resolve '../img/lightbox/default-skin.png' in '/Users/jonathan/Sites/websites/thepacificdifference-v2/src' 265 | .pswp__button--arrow--left:before, 266 | .pswp__button--arrow--right:before { > 267 | background: url(../img/lightbox/default-skin.png) 0 0 no-repeat; | ^ 268 | background-size: 264px 88px; 269 | width: 44px; ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:280:22: Can't resolve '../img/lightbox/default-skin.svg' in '/Users/jonathan/Sites/websites/thepacificdifference-v2/src' 278 | .pswp--svg .pswp__button--arrow--left:before, 279 | .pswp--svg .pswp__button--arrow--right:before { > 280 | background-image: url(../img/lightbox/default-skin.svg); | ^ 281 | } 282 | .pswp--svg .pswp__button--arrow--left, ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: /Users/jonathan/Sites/websites/thepacificdifference-v2/node_modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss:589:16: Can't resolve '../img/lightbox/preloader.gif' in '/Users/jonathan/Sites/websites/thepacificdifference-v2/src' 587 | .pswp__preloader__icn { 588 | /* We use .gif in browsers that don't support CSS animation */ > 589 | background: url(../img/lightbox/preloader.gif) 0 0 no-repeat; | ^ 590 | } 591 | }  
-- NORMAL --

Atha pro commented 5 years ago

Hello Damian, Its been referenced with a variable properly on node-modules/ng-uikit-pro-standard/assets/scss/angular/pro/_lightbox.scss file but the reference is wrong on this file node-modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss file and its not using the variable. How soon can this be fixed on your end and propagated to standard version for our use? Thanks.

Damian Gemza staff commented 5 years ago

Dear Atha, Could you please try to download ng-uikit-pro-standard library from our GitLab dev branch, and check if it works? The problem with url's in node-modules/ng-uikit-pro-standard/assets/scss/pro/_lightbox.scss should be resolved with 6.1.5 release of MDB Angular. Please let me know if dev branch solves your problem. Best Regards, Damian

Damian Gemza staff answered 5 years ago

Dear Atha,
That's strange. I didn't saw that error while testing package...
For a workaround of this problem:

Please open

node_modules/ng-uikit-pro-standard/assets/scss/core/_variables.scss,

and change line 154 ($image-path) from

$image-path: "../img/" !default;

to

 $image-path: "../../img/" !default;

Best Regards,

Damian

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
Atha
Pro User 10Support score
1Questions 1Answers 0Snippets