What is the best way to include an external library with webpack.mix

I am having a big dilemma trying to integrate few libraries and having errors like:

jQuery not defined.
The function scrollReveal() doesn't exist.
Not loading the css classes (doing the import in app.scss)
Some dependencies for example in slider.css are in a different folder (fonts, images)

The library I am trying to integrate is scrollreveal.min.js and, jquery.ajaxchimp.min.js, slider.css

I really appreciate someone who can help me or put an example, I have about a week dealing with this problem.

mvd

6 years ago

Best Answer

Level 48

@heremiguel

Not tested but

Download scrollreveal.min.js and copy it to folder resources/js/ Do the same for jquery.ajaxchimp.min.js

Download slider.css and copy this file to resources/sass/

Change your webpack.mix file (note: includes app.js for Jquery)

mix.scripts(['resources/js/app.js',
        'resources/js/jquery.ajaxchimp.min.js',
        'resources/js/scrollreveal.min.js'],
    'public/js/scripts.js')
    .styles(['resources/sass/app.css',
        'resources/sass/slider.css'],
        'public/css/styles.css');

Run npm run dev

In your HTML head

For scripts:

<script src="{{ asset('js/scripts.js') }}" defer></script>

And styles

<link href="{{ asset('css/styles.css') }}" rel="stylesheet">

heremiguel

6 years ago

Level 1

Thanks @mvd

Please or to participate in this conversation.