FaranAli9's avatar

Laravel Mix won't compile sass files

I have two scss files in "resources/assets/sass/" - app.scss and custom.scss. Whenever I run npm run dev, The js assets compile but the scss assets are completely ignored no matter what I do. I am trying on a fresh install of laravel 5.4.

versions: Laravel : 5.4.19 Node: 6.10.1 npm: 3.10.10 Laravel-mix: 0.11.3

0 likes
9 replies
Jaytee's avatar

What does your webpack.mix.js file look like?

Make sure it includes

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css');
mix.sass('resources/assets/sass/custom.scss', 'public/css/custom.css');

Or something similar along those lines.

FaranAli9's avatar

My webpack.mix.js file is:

const { mix }  = require('laravel-mix');

mix
    .sass('resources/assets/sass/app.scss', 'public/css/app.css')
    .sass('resources/assets/sass/custom.scss', 'public/css/custom.css')
    .js('resources/assets/js/app.js', 'public/js')
    .version();
NonStop's avatar

Since you are using version() , have you replaced the default asset() function with mix() in your view files?

FaranAli9's avatar

Yeah i will use the assets using mix() but the problem is that the scss is not even compiling in the first place. There's no app.css or custom.css generated. The public/css/ directory is empty

FaranAli9's avatar

I don't think splitting it in multiple lines will have any effect. Still I tried and had no luck with it :(

FaranAli9's avatar

I just checked it on a ubuntu machine and it's working with node:6.10.2 and npm:3.10.10

But it won't work on windows 10

Miguejarias's avatar

Man the same thing is happening to me. Idk what it could be

FaranAli9's avatar
FaranAli9
OP
Best Answer
Level 3

I found out what the problem was. Turns out my assets were not compiling because of the project directory's full path. The project directory's full path should not have any spaces or round brackets in it so i moved it to a different location and it's working fine now. My project was at "C:\Program Files (x86)\Ampps\www\project-name" I moved it to "C:\Ampps\www\project-name" and it started working

1 like

Please or to participate in this conversation.