lewis4u's avatar

Laravel 8 - problem with scss and npm run dev

When trying to compile the scss file I get this error:


npm run dev

> @ dev /var/www/projects/eight
> npm run development


> @ development /var/www/projects/eight
> mix

ERROR in ./resources/css/app.scss
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: EISDIR: illegal operation on a directory, read
    at processResult (/var/www/projects/eight/node_modules/webpack/lib/NormalModule.js:597:19)
    at /var/www/projects/eight/node_modules/webpack/lib/NormalModule.js:691:5
    at /var/www/projects/eight/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /var/www/projects/eight/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/var/www/projects/eight/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/var/www/projects/eight/node_modules/postcss-loader/dist/index.js:56:7)

1 ERROR in child compilations
webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-01-23T23_21_56_881Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-01-23T23_21_56_915Z-debug.log

Steps to reproduce:

  1. Install fresh Laravel 8
  2. Rename the file '/resources/css/app.css' => '/resources/css/app.scss'
  3. Run 'npm install'
  4. Run 'npm run dev' // this will automatically install (sass, sass-loader and resolve-url-loader) dependencies and shows this message: 'Finished. Please run Mix again. '
  5. Run 'npm run dev'

and after that the error message from above.

How to solve this 'simple' problem???

P.S. the resources/css/app.scss file is completely empty... it's just renamed from app.css to app.scss

0 likes
6 replies
chaudigv's avatar

Did you also replaced the file name in webpack.mix.js to

mix.sass("resources/sass/app.scss", "public/css")
2 likes
lewis4u's avatar

Yes of course. I've tried with just renaming the resources/css/app.css to resources/css/app.scss and also created the new directory resources/sass/ and made the app.scss file inside... nothing works

It seems to me like there is something wrong with laravel mix 6.* it uses something new Maybe Jeffrey Way knows what's the problem?

EISDIR: illegal operation on a directory

means that there is some problem with path being the directory and not a file...

I think I figured it out... it's the node versioning problem... If you use node v12* and npm 6.14.* it works

thinkverse's avatar

As you hinted at in your comment above, yes the minimum node version for Laravel Mix 6 is >=12.14.0, it got bumped from >=8.9.0, not sure why that isn't mentioned anywhere. You're not the first I've seen running an unsupported node version.

ajayidavid99's avatar

Downgrade to laravel 8.3.. Ita free of that issue OR install laravel 8.5. and install the latest vue-loader. You should be okay by just upgrading vue-loader anyways

phanphan's avatar

hi @lewis4u this issue "Laravel 8 - problem with scss and npm run dev" resolve ? I had been the like issue. please help me

lewis4u's avatar

I couldn't solve this problem... but I had luck that I used Virtual Machine at that time.... so I just reinstalled the OS and made everything from scratch and then it worked... I know it's a drastic move, but it got solved that way.

Please or to participate in this conversation.