sass - Laravel 8 - problem with scss and npm run dev

Question

Tried node versions: 12.20.1, 14.15.4, 15.6.0

When trying to compile the scss file I always 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.

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

Question: Why does this happen? How to solve it?

---

Update

Here is a little gif to let you see what actually happens:

question from:https://stackoverflow.com/questions/65865770/laravel-8-problem-with-scss-and-npm-run-dev

Answer 1

Hi,
I will try to explain you how to use npm to compile your scss files to css files, because of you're mixing SAAS and CSS.

• /app/resources/sass - there are scss files
• /app/resources/css - an optional folder for compiled scss
• webpack.mix.js - settings for compiling source (scss, js, ...)

I prefer to set up compilation to folder '/public/'. So you can set up it in your webpack.mix.js.

    mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

This wil generate app.js in /public/js/ folder and app.css in /public/css/ folder. If you want to change the name of css, you can change the name of your scss in /resources/saas/ folder - for example from app.scss to admin.scss - so it compiles admin.css after next 'npm run watch|dev|prod'.

After that, you can use it in you views/blade templates as:

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

But, if you need to have your saas files in /app/resources/css/ folder, you can also set up it in your webpack.mix.js - source folder for saas.