Zach Broniszewski Zach Broniszewski - 3 years ago 162
Sass (Sass) Question

LARAVEL: How to compile app.sass into app.css

UPDATE Running on Laravel 5.4.30 on Windows 10

UPDATE: Leaving the files as .scss works perfectly fine, but I do NOT want to use this in my project. I want to use indented sass, or .sass

Okay, so I have committed to hours upon hours of research before I decided to ask this question on here.
Simply put, how do I compile:

in Laravel?

I've tried using Laravel Elixir.. total fail..

I've tried

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.sass', false, { indentedSyntax: true }, 'public/css');


Notice the
{ indentedSyntax: true }
, this also didn't work.

I've installed the
node modules.. still no success.

Here is my
file found in the same directory as

// Fonts
// @import url(",400,600")

// Variables
@import "variables"

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"

display: none

is the class in Laravel included in
, I used this as a test and set display to none.

In my
file, I just have:

@import "custom"

Do note that I changed
, so it isn't proper .sass syntax (but of course nothing is compiling anyway, so it's not like it matters)

I've tried the sass-loader, gulp-sass, compass-sass, nothing has worked.

There has GOT to be an easier way (or even a way at all) to use
in Laravel and have it compile to

I have a feeling it all has to do with my
file, but there is very little documentation of the parameter setup to have it compile to

Any help would be greatly appreciated, I've seen there are a number of people with this problem, thanks!

Answer Source


Simple fix.. clone or download lavarel's repo @

Though I've updated package.json, webpack.mix.js, etc., there must still be some extra files or code in the current/most-updated version.

After you download the repo, run npm install to be sure you have all necessary node_modules and don't run into any errors.

After npm install, you can successfully run npm run dev and compile any assets including indented sass!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download