laravel mix compile assets from a package in node_modules?

Question

I started using laravel-mix on my new Laravel 5.7 project to compile all the js/css into one file, which will appear in my public js/css directory (one for each page) like this:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .js('resources/js/create.member.js', 'public/js/backend/members')
   .sass('resources/sass/create.member.scss', 'public/css/backend/members')
   .sourceMaps();

Like this I want to keep the views tidy and reduce the number of assets that have to be loaded.

Everything fine so far and I understand how to work with laravel-mix. Now I installed some packages, specifically cropperjs and summernote, via npm, to my node_modules directory.

It fails when I import/require their scss/js to the scripts which are going to be compiled and placed in public by laravel-mix because it seems that these scripts (cropper.js, summernote.scss, etc...) are referencing to other assets across their origin package directory within the node_modules directory (fonts, images, etc...)

For JS I do:

require('../../node_modules/cropperjs/dist/cropper.js');
require('../../node_modules/summernote/dist/summernote.js');

Fors SCSS I do:

@import '~cropperjs/src/css/cropper';
@import '~summernote/src/less/summernote-bs4';

My question is: What is good practice when using packages, installed with npm?

Do I have to put the whole package directory to my public directory? Do I link to the assets in the package directory which is located in the node_modules directory? Or is their any chance left to compile them together with my other assets via laravel-mix/webpack, maybe a flag I'm missing or so? Do I have to use any additional software like bower to make things happen?

zjbarg · Accepted Answer · 2018-11-02 20:03:35Z

2

For js I just use

import 'vue'
import 'cropperjs'

Usually the package documentation will tell you how to import it.

answered Nov 2, 2018 at 20:03

zjbarg

6794 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pathros Over a year ago

How do you import the CSS files? I have posted this question.

Polaris · Accepted Answer · 2018-11-04 17:31:47Z

0

You should not be compiling node assets in webpack.mix... Like barghouthi said, usually the package documentation will tell you how to import the package in your js file.

answered Nov 4, 2018 at 17:31

Polaris

1,2499 silver badges14 bronze badges

Collectives™ on Stack Overflow

laravel mix compile assets from a package in node_modules?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related