[Bug] Missing Files - Can't Build from SCSS under Mix

[yakatz]

Version

2.0.0

Reproduction link

https://gist.github.com/yakatz/be2979f939744ea278f07147b48a9612

Operating System

Windows

Device

Computer

Browser & Version

N/A

Steps to reproduce

Place argon-dashboard-pro download in node_modules (I use a custom npm package hosted inside my personal Gitlab instance)

Add
@import "argon-dashboard-pro/assets/scss/argon-dashboard";
to your project app.scss file.

In webpack.mix.js, add
max.sass('resources/sass/app.scss', 'public/css');

What is expected?

SCSS should build

What is actually happening?

SCSS errors with
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../node_modules/@mirrors/argon-dashboard-pro/assets/scss/argon-dashboard/plugins/pro/images/layers.png' in 'D:\Web\dashboard-project\resources\sass'
at finishWithoutResolve (D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\Resolver.js:293:18)
at D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\Resolver.js:362:15
at D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\Web\dashboard-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), :16:1)
at D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\Web\dashboard-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), :27:1)
at D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\Web\dashboard-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
at D:\Web\dashboard-project\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at processResult (D:\Web\dashboard-project\node_modules\webpack\lib\NormalModule.js:751:19)
at D:\Web\dashboard-project\node_modules\webpack\lib\NormalModule.js:853:5
at D:\Web\dashboard-project\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at D:\Web\dashboard-project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (D:\Web\dashboard-project\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (D:\Web\dashboard-project\node_modules\css-loader\dist\index.js:155:5)
at processTicksAndRejections (internal/process/task_queues.js:95:5)

---

Solution

Add missing files or remove url() declarations.

Additional comments

Mix is a very popular build tool, so it would be great if it would just work.

If the package.json included a "main" key pointing to the main js file and a "style" key pointing to the scss, you could simply include it in your own scss with @import "argon-dashboard-pro";
If you want a reference, the way fontawesome does it is amazing!

[rarestoma]

Hi @yakatz,

Thank you for working with our products.

I just added it to the 'to do' list for the next update.

Best regards,
Rares

[skiat]

Hi @yakatz,

Thank you for working with our products.

I just added it to the 'to do' list for the next update.

Best regards, Rares

Wow that is a fantastic news! Are you really planning to release the next version with support for laravel mix as replacement of the old gulp?
Any ETA?

[rarestoma]

Hi @skiat,

Thank you for working with our products.

This change will be proposed in the next update discussion, but we are not sure that we will change this.

Best regards,
Rares

[iamalexly]

Hi @yakatz,

Two solutions until a patch is released : The wrong files import are located into the _leaflet.scss file.

First solution (easy way) :

Edit the file ./assets/scss/argon-dashboard/plugins/pro/_leaflet.scss and remove the 3 wrong imports :

// ./assets/scss/argon-dashboard/plugins/pro/_leaflet.scss

...

366. .leaflet-control-layers-toggle {
367.   background-image: url(images/layers.png);
368.   width: 36px;
369.   height: 36px;
370. }
371. .leaflet-retina .leaflet-control-layers-toggle {
372.	  background-image: url(images/layers-2x.png);
373.	  background-size: 26px 26px;
374.	}

...

411. /* Default icon URLs */
412. .leaflet-default-icon-path {
413.	  background-image: url(images/marker-icon.png);
414.	}

Second solution (beauty way) :

Download the 3 following files from this source : https://github.com/Leaflet/Leaflet/tree/master/dist/images

• layers-2x.png : https://raw.githubusercontent.com/Leaflet/Leaflet/master/dist/images/layers-2x.png
• layers.png : https://raw.githubusercontent.com/Leaflet/Leaflet/master/dist/images/layers.png
• marker-icon.png : https://raw.githubusercontent.com/Leaflet/Leaflet/master/dist/images/marker-icon.png

Then create a images folder into ./assets/scss/argon-dashboard/plugins/pro/ and move the previously uploaded images to this folder.

I hope this helps you to solve the problem.