Zach Broniszewski Zach Broniszewski - 1 year ago 113
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:

resources/assets/sass/app.sass
into
public/css/app.css
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');


in
webpack.mix.js


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

I've installed the
node-sass
and
gulp
node modules.. still no success.

Here is my
_custom.sass
file found in the same directory as
app.sass


// Fonts
// @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600")

// Variables
@import "variables"

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

.flex-center
display: none


.flex-center
is the class in Laravel included in
welcome.blade.php
, I used this as a test and set display to none.

In my
app.sass
file, I just have:

@import "custom"


Do note that I changed
_variables.scss
to
_variables.sass
, 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
.sass
in Laravel and have it compile to
app.css
!

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

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

Answer Source

SOLVED

Simple fix.. clone or download lavarel's repo @ https://github.com/laravel/laravel

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