title: How to use scss in jekyll?
body: <p>I saw similar posts on SO <a href="https://stackoverflow.com/questions/38437416/jekyll-doesnt-compile-scss-files-with-jekyll-serve">here</a> and on GH <a href="https://github.com/jekyll/jekyll-help/issues/281" rel="noreferrer">here</a>, but neither solved the issue that I have.</p>
  
  <p>I have a Jekyll app on my gh pages where I needed to use scss features (mostly for mixins). However, I could not get jekyll to work with scss. </p>
  
  <p>Currently, this is where my (CSS) files are at. All of my CSS are taken from <code>custom.css</code>. I imported it in header <code>&lt;link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/custom.css"&gt;</code>. </p>
  
  <p><a href="https://i.stack.imgur.com/JOEH4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JOEH4.png" alt="folders"></a></p>
  
  <p>The <code>.scss</code> files inside <code>_sass</code> folder are empty. </p>
  
  <p>This is what it looks like inside <code>_config.yml</code>: </p>
  
  <pre><code>...
  #sass
  sass:
    sass_dir:           _sass
    style:              compressed
  </code></pre>
  
  <p>That's where I am at now. Here are some things I have tried:</p>
  
  <ol>
  <li><p>I have tried changing <code>custom.css</code> into <code>custom.scss</code> (and then updated the header <code>&lt;link href... stylesheets/custom.scss"&gt;</code>. When I do that, I get <code>Resource interpreted as Stylesheet but transferred with MIME type text/x-scss...</code> error.</p></li>
  <li><p>I tried changing the configuration inside <code>_config.yml</code> into:
  <code>
    sass:
      sass_dir:           assets/stylesheets
      style:              compressed
  </code>
  ... and kept the changes from 1. I restarted <code>jekyll server</code>. However I still get <code>Resource interpreted as Stylesheet but transferred with MIME type text/x-scss...</code> error.</p></li>
  <li><p>Tried adding <code>&lt;link rel="stylesheet" href="{{ site.baseurl }}/_sass/main.scss"&gt;</code>, but I get <code>GET http://localhost:4000/_sass/main.scss</code> error. </p></li>
  </ol>
  
  <p>The problem, I noticed, is that the app seem to not recognize <code>main.scss</code> at all. I tried to create a simple red-colored div with <code>main.scss</code>, but nothing was displayed.</p>
  
  <p>The question is, how can I use <code>.scss</code> with Jekyll? </p>