title: LARAVEL: How to compile app.sass into app.css
body: <p><strong>UPDATE</strong> Running on Laravel 5.4.30 on Windows 10</p>
  
  <p><strong>UPDATE:</strong> 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</p>
  
  <p>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:</p>
  
  <p><code>resources/assets/sass/app.sass</code> into <code>public/css/app.css</code> in Laravel?</p>
  
  <p>I've tried using Laravel Elixir.. total fail..</p>
  
  <p>I've tried </p>
  
  <p><code>mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.sass', false, { indentedSyntax: true }, 'public/css');</code></p>
  
  <p>in <code>webpack.mix.js</code></p>
  
  <p>Notice the <code>{ indentedSyntax: true }</code>, this also didn't work.</p>
  
  <p>I've installed the <code>node-sass</code> and <code>gulp</code> node modules.. still no success.</p>
  
  <p>Here is my <code>_custom.sass</code> file found in the same directory as <code>app.sass</code></p>
  
  <pre><code>// 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
  </code></pre>
  
  <p><code>.flex-center</code> is the class in Laravel included in <code>welcome.blade.php</code>, I used this as a test and set display to none.</p>
  
  <p>In my <code>app.sass</code> file, I just have:</p>
  
  <pre><code>@import "custom"
  </code></pre>
  
  <p>Do note that I changed <code>_variables.scss</code> to <code>_variables.sass</code>, so it isn't proper .sass syntax (but of course nothing is compiling anyway, so it's not like it matters)</p>
  
  <p>I've tried the sass-loader, gulp-sass, compass-sass, nothing has worked.</p>
  
  <p>There has GOT to be an easier way (or even a way at all) to use <code>.sass</code> in Laravel and have it compile to <code>app.css</code>!</p>
  
  <p>I have a feeling it all has to do with my <code>webpack.mix.js</code> file, but there is very little documentation of the parameter setup to have it compile to <code>app.css</code>.</p>
  
  <p>Any help would be greatly appreciated, I've seen there are a number of people with this problem, thanks!</p>