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!

Is it on laravel 5.4?

Himanshu Bhandari
– Himanshu Bhandari

2017-07-23 05:46:01 +00:00
Commented Jul 23, 2017 at 5:46 — Himanshu Bhandari
– Himanshu Bhandari, Commented Jul 23, 2017 at 5:46
@HimanshuBhandari yes it is indeed, any ideas?

Zach Broniszewski
– Zach Broniszewski

2017-07-23 06:04:03 +00:00
Commented Jul 23, 2017 at 6:04 — Zach Broniszewski
– Zach Broniszewski, Commented Jul 23, 2017 at 6:04

Himanshu Bhandari · Accepted Answer · 2017-07-23 06:18:26Z

10

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.

answered Jul 23, 2017 at 6:18

Himanshu Bhandari

1,8892 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zach Broniszewski Over a year ago

I'm trying this on a FRESH laravel project right now. The ONLY change I've made is adding: <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> to welcome.blade.php, however I am getting an error. 2/2) ErrorException The Mix manifest does not exist. (View: C:\xampp\htdocs\app\resources\views\welcome.blade.php)

Himanshu Bhandari Over a year ago

Please remove everything from app.scss and put only a single class to test if mix is working fine("npm run dev"). If it works fine than include it in app.blade.php

Zach Broniszewski Over a year ago

Okay I'll try that now. I'm completely removing node and npm and reinstalling because I've been getting a lot of errors using npm lately.

Hmerman6006 Over a year ago

Had the same problem after running npm install finding that my app.scss file is empty. I thought it would have some pre-compiled css in there. But it turns out you can import bootstrap ect and create your own classes, therefore having much more control of your templates. After adding my own classes and gridlayouts I find the laravel template system much more likeable.

Zach Broniszewski · Accepted Answer · 2017-07-23 22:16:52Z

5

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!

answered Jul 23, 2017 at 22:16

Zach Broniszewski

2401 gold badge2 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related