How do I resolve images from node_modules via webpack

See more:

Javascript

webpack

vue.js

I'm using Laravel's default installation for Intertia and Vue. I installed lightbox npm install lightbox2 --save. I get error like Error: Can't resolve '../images/loading.gif'

What I have tried:

My webpack.config.js looks like this:

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

resources/js/app.js looks like this:

require('./bootstrap');
require('lightbox2/dist/js/lightbox');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .mixin(require('./translation'))
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

resources/css/app.css looks like this:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'intlTelInput.min.css';
@import 'toastr.min.css';
@import 'lightbox2/dist/css/lightbox.min.css';

.logo {
    max-height: 50px;
}

But when I try to run npm run dev I get this error:

ERROR in ./resources/css/app.css
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 '../images/loading.gif' in 'C:\xampp\htdocs\site\resources\css'

That image resides in node_modules/lightbox2/dist/images