NPM error in parameter 1 scss on run: npm run watch - laravel

Question

This is the error that it shows to me, I put in the webpack.mix.js, the parameter 1 of scss to list of scss I would use in the app:
> # watch /media/ricardo/FILES/projects/Laravel/costurita-etl
> npm run development -- --watch
> # development /media/ricardo/FILES/projects/Laravel/costurita-etl
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
assert.js:49
throw new AssertionError(obj);
^
AssertionError [ERR_ASSERTION]: mix.sass() is missing required parameter 1: src
at Function.preprocessor (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/Verify.js:32:9)
at Sass.preprocess (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Preprocessor.js:134:16)
at Sass.register (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Sass.js:12:21)
at Api.mix.(anonymous function).args [as sass] (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/ComponentFactory.js:98:53)
at Object.<anonymous> (/media/ricardo/FILES/projects/Laravel/costurita-etl/webpack.mix.js:24:2)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
[The usual npm errors...]
This is webpack.mix.js:
let mix = require('laravel-mix');
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/vague.js',
'resources/assets/js/freeze_header.js',
'node_modules/chart.js/src/chart.js',
'node_modules/jquery/src/jquery.js',
'node_modules/popper.js/dist/popper.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
], 'public/js').sass([
'resources/assets/sass/app.scss',
'node_modules/bootstrap/dist/css/bootstrap.css',
], 'public/css');

Answer 1

This is because .sass is a transpiler command and not a combiner command, which you're treating it like .js, and it is not.
Instead, app.scss should be the single source of truth for all of it's dependencies, which you can use #import to bring those dependencies into your sass file; observe:
// app.scss
#import '~bootstrap/scss/src/bootstrap-grid';
#import '~bootstrap/scss/src/bootstrap-reboot';
#import '~bootstrap/scss/src/bootstrap';
// the rest of your code
The ~ is a reference to the node_modules directory, so you can omit hard coding the path. You also don't need to declare the .scss extension here, either.
Finally, you would simply pass the path to your app.scss as a string argument to the .sass command:
.sass('resources/assets/sass/app.scss')

Answer 2

even i got the same error...below code in webpack.mix.js helped me to solve it.
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');