Error using Webpack - relative modules were not found

[schel4ok]

I cannot understand how to setup postcss-copy-assets inside webpack config file to make it work.

In my app.css I have @import 'lightgallery.js'; which imports plugin css from node_modules.
But after npm run dev I got errors that relative modules were not found.

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 7 errors                               8:33:23 PM

These relative modules were not found:

* ../fonts/lg.svg?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.ttf?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.woff?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/loading.gif in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/video-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/vimeo-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/youtube-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
     Asset     Size   Chunks             Chunk Names
/js/app.js  730 KiB  /js/app  [emitted]  /js/app

WARNING in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

postcss-copy-assets requires postcss "to" option.
 @ ./resources/css/app.css 2:14-142

Here is my webpack

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .scripts([
    	  'public/js/app.js',
    	  'resources/js/includes/script.js'
	  ],  'public/js/app.js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'), 
      require('postcss-copy-assets') 
        (
          [copyAssets({ base: 'public'})],
          {to: 'public/css/app.css'}
        ),
      require('tailwindcss'),
      require('postcss-extend'), 
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

in resources/css/app.css I have string @import 'lightgallery.js'; which gives me this error.
Lightgallery.js should be imported from \node_modules\lightgallery.js\dist\css\lightgallery.css

Inside lightgallery.css there are urls like that

src: url("../fonts/lg.ttf?22t19m") format("truetype"), url("../fonts/lg.woff?22t19m") format("woff"), url("../fonts/lg.svg?22t19m#lg") format("svg");
background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent;

[alexmchardy]

The to option needs to be supplied to postcss itself, not postcss-copy-assets. After some digging into laravel-mix, it looks like the postCss part of your config should be:

   .postCss('resources/css/app.css', 'public/css', {to: 'public/css/app.css'}, [
      require('postcss-import'), 
      require('postcss-copy-assets')({base: 'public'}),          
      ...
   ]);