URL Processing in Laravel mix doesn't work in postCSS

Asked 19/2, 2021 at 19:16 Answered 3/6, 2021 at 11:30

I have problems with URL Processing in Laravel mix.

here is my app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/*---------- import LightGallery from node_modules  ----------*/
@import 'lightgallery.js';

/*---------- my styles for thumbnails ----------*/ 
@import 'includes/thumbnails';

here is my webpack.mix.js

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('tailwindcss'),
      require('postcss-extend'), 
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss": "^8.2.6",
        "postcss-extend": "^1.0.5",
        "postcss-import": "^12.0.1",
        "postcss-simple-extend": "^1.0.0",
        "postcss-simple-vars": "^6.0.3",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.7",
        "sass-loader": "^8.0.2",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@tkh/tailwind-plugin-flex-basis": "^1.4.0",
        "lightgallery.js": "^1.4.0",
        "npm": "^7.3.0"
    }
}

And if I do npm run dev I see following error. It seems that fonts and images from node_modules/lightgallery.js/dist don't copied by laravel mix

> dev
> npm run development


> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 7 errors                               9:06:04 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

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/lg.svg?22t19m' in '/home/http/app/resources/css'
    at /home/http/app/node_modules/webpack/lib/Compilation.js:925:10
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /home/http/app/node_modules/neo-async/async.js:2830:7
    at /home/http/app/node_modules/neo-async/async.js:6877:13
    at /home/http/app/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/http/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/http/app/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
    at /home/http/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (node:internal/process/task_queues:75:11)
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.svg?22t19m' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351805-1351838
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.ttf?22t19m' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351654-1351687
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../fonts/lg.woff?22t19m' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1351731-1351765
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/loading.gif' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1368504-1368533
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/video-play.png' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1359119-1359151
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/vimeo-play.png' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1358797-1358829 7:1358953-1358985
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module not found: Error: Can't resolve '../img/youtube-play.png' in '/home/http/app/resources/css'
 @ ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css) 7:1359422-1359456 7:1359582-1359616
 @ ./resources/css/app.css

But if I do the same job with sass instead postCss everything working. Here is my working code, but I want to get rid of sass and replace all with postCSS plugins

/resources/css/app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'includes/thumbnails';

/resources/sass/app.scss

@import '~lightgallery.js/src/sass/lightgallery';
/* postcss-mixin plugin also doesn't work in my mix file */ 
@import 'mixins/svg';

webpack.mix.js

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')
   .sass('resources/sass/app.scss', 'public/css')
   .styles([
        'resources/css/app.css',
        'public/css/app.css'
      ],'public/css/app.css')
   .postCss('public/css/app.css', 'public/css', [
      require('postcss-import'),
      require('tailwindcss'),
      require('postcss-extend'),
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

Beleaguer answered 19/2, 2021 at 19:16 Comment(2)

Where's your package.json? – Spinach 19/2, 2021 at 19:37

just added to the post – Beleaguer 19/2, 2021 at 19:50

First, in webpack.mix.js, do you need the SASS line? Because it's causing issues.

.sass('resources/sass/app.scss', 'public/css')

Ensure the tilde is present to reference the node_modules/ directory in your app.css for lightgallery.js and use the full CSS path.

@import '~lightgallery.js/dist/css/lightgallery.min.css';

Update Node dependencies for Laravel Mix 6, Webpack, Autoprefixer, and PostCSS and update the "scripts" section of package.json to the following.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tkh/tailwind-plugin-flex-basis": "^1.4.0",
        "alpinejs": "^2.8.0",
        "autoprefixer": "^10.2.4",
        "axios": "^0.21",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.11",
        "lightgallery.js": "^1.4.0",
        "lodash": "^4.17.20",
        "postcss": "^8.2.6",
        "postcss-extend": "^1.0.5",
        "postcss-import": "^8.2.0",
        "postcss-simple-extend": "^1.0.0",
        "postcss-simple-vars": "^6.0.3",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.8",
        "sass-loader": "^9.0.3",
        "tailwindcss": "2.0.3",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.23.0"
    }
}

Then run npm update && npm install.

Now you can run npm run dev.

Spinach answered 19/2, 2021 at 20:6 Comment(6)

Unknown error from PostCSS plugin. Your current PostC SS version is 8.2.6, but postcss-import uses 7.0.35. Perhaps this is the source of the error below. 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/postcss-loader/dist/cjs.js): Error: Failed to find '~lightgallery.js/dist/css/lightgallery.css' in [ /home/http/app/resources/css ] – Beleaguer 19/2, 2021 at 20:30

Once you update everything in the package.json, did you install the updates? via npm update && npm install? – Spinach 19/2, 2021 at 20:33

Yes I did that. Then according to this post laracasts.com/discuss/channels/laravel/… I upgraded postcss-import to ^14.0.0. And after npm run dev I see 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/postcss-loader/dist/cjs.js): Error: Failed to find '~lightgallery.js/dist/css/lightgallery.css'   in [     /home/http/app/resources/css   ]

– Beleaguer 19/2, 2021 at 20:45

If I delete tilde @import 'lightgallery.js/dist/css/lightgallery.css'; then error is different

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 '../fonts/lg.ttf?22t19m' in '/home/http/app/resources/css'     at finishWithoutResolve (/home/http/app/node_modules/enhanced-resolve/....  1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 2 errors

– Beleaguer 19/2, 2021 at 20:48

You are still using the wrong lightgallery URL, look at the post. Copy my package.json... and paste it into your package.json, then run 'npm update && npm install' – Spinach 19/2, 2021 at 20:53

Let us continue this discussion in chat. – Spinach 19/2, 2021 at 21:1

Try it in webpack.mix.js.

install webpack-livereload-plugin with npm

var LiveReloadPlugin = require('webpack-livereload-plugin');
mix.webpackConfig({
    plugins: [new LiveReloadPlugin()],
    stats: {
        children: true
    }
});

Tuttle answered 3/6, 2021 at 11:30 Comment(2)

where we should try? – Delphine 27/10, 2021 at 7:44

in webpack.mix.js in root directory. First You will install webpack-livereload-plugin package. and use it. @Mr.Pyramid – Tuttle 28/10, 2021 at 17:33