3

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.

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Taqi Vaheed
  • 116
  • 1
  • 1
  • 11

2 Answers2

4

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')
});
CGodo
  • 1,478
  • 14
  • 15
  • 1
    Oh my God. What a stupid reason! I guessed that the problem would be the #, because everything worked properly before I transferred my projects to this folder. Thank you so much. – Taqi Vaheed Jan 06 '19 at 07:15
  • Thank you so much! Had the same issue on a Mac with a # in my path, however I am not able to determine which of the many dependencies might be the reason for it - node-sass was not installed. >100 Projects in my Folder, never a problem, this projects uses an angular setup and bang, somehow the same issue. – Jook Jul 10 '19 at 23:36
0

in your webpack.mix.js write the code

mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css');

Mbire Gueye
  • 1
  • 1