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:

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.

Answer 2

The issue may not be with SCSS. I know it's coming from vue-loader and webpack config. Well, You will notice both .vue and .sass compiles into your css. But this issue for me became noticeable from laravel 8.4.*.

Solution 1: simplest work around could be to install or downgrade to laravel 8.3.*... Everything smooth from that point forward. You can create new laravel project with:

composer create-project --prefer-dist laravel/laravel:^8.5.* projectName

Solution 2: Install a later version of vue-loader, or the latest version, should work; vue-loader ^15.9.8 worked for me. This also worked with laravel 8.5.*. Uninstall whatever vue-loader version; think 15.9.5 or so, just:

Uninstall: npm uninstall --save vue-loader Install: npm i vue-loader

You should be good from there, for me, can't debug further!

Answer 3

Check folder \Resources. and create folder \Sass with file app.scss .

Check file package.json . Add rows: "sass": "^1.20.1", and "sass-loader": "^8.0.0", .

Check file webpack.mix.js . Add row .sass('resources/sass/app.scss', 'public/css');

Run CMD (CMDER etc.) and start: npm install after npm run dev.

Complete.

Answer 4

First create css main.css file in folder 'public/css'

Then go to weppack.mix.js file and add the following:-

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 
'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).sass('resources/sass/main.scss', 'public/css');

As you see the Mix take the sass file and where to compiling in (public/css)

Go to cmd run:-

npm run dev

Great Your your styles will compiled from main.scss to main.css file in public/css folder

Thanks for reading hope that will help someone.