"Module build failed..." in Laravel Mix - npm

Question

I did not change anything in app.scss, but when I run npm run watch I get the following errors:
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Unsupported operation: Cannot extract a file path from a URI with a fragment component
# ./resources/sass/app.scss 2:14-254
Asset Size Chunks Chunk Names
/js/app.js 2.46 MiB /js/app [emitted] /js/app
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Join(null, "variables"): part 0 was null, but part 1 was not.
#import 'variables';
^^^^^^^^^^^
stdin 2:9 root stylesheet
in C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\resources\sass\app.scss (line 2, column 9)
at runLoaders (C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\webpack\lib\NormalModule.js:30
at C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\loader-runner\lib\Loader
13)
Any help appreciated.

Answer 1

Finally found the issue. It is related to dart-sass being used instead of node-sass with laravel-mix v4.x.x.
Turns out something related to dart-sass or laravel-mix does not work well with paths containing a '#' symbol. In your case, your app is located at C:\Users\TAQI VAHEED\Desktop\#Coding\resPro and the #Coding folder is creating the error.
Either move your app somewhere else without a '#' symbol in the path OR enable node-sass again by following the steps from laravel-mix 4.0.0 release notes:
you can manually switch back to node-sass, like so:
npm install node-sass
mix.sass('resources/sass/app.sass', 'public/css', {
implementation: require('node-sass')
});

Answer 2

in your webpack.mix.js write the code
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css');