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

Question

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 1

Though you have explained very well but I am still not getting where you stuck, anyway let me give it a try.

from laravel docs :

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

after that :

// Run all Mix tasks...

npm run dev

// Run all Mix tasks and minify output...

npm run production

After that you can include the .css file generated in public/css in your .blade files through :

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

If you are using Laravel 5.4 Elixer won't work.

let me know if it is not what you want.

Answer 2

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!