CODEWITHSUNDEEP
sassjekyll
user3520669
user3520669

Reputation:

Jekyll Static Page CSS Not Rendering

I am building a blog for myself using Jekyll, however, when I open the page in my browser, the SCSS fails to load. I try to navigate to the SCSS file through my browser but to no avail, the browser believes that the SCSS does not exist.

Here is how I add the stylesheet to the HTML:

<link rel="stylesheet" type="style/css" href="/_sass/_base.scss">

I did this to all of my stylesheets, and yet the it doesn't work.

Does anyone know how to fix this problem? Thank you in advance.

Upvotes: 0

Views: 1585

Answers (1)

ashmaroli
ashmaroli

Reputation: 5444

You do not link to stylesheets with an href to "/_sass/_base.scss".

Instead you should do the following:

  • create another directory to hold your "stylesheet", say, css/.

  • then add an empty stylesheet with an empty front matter block (required)

    ---
---

// this is an empty stylesheet named "style.scss"
// use @import here to load partials from your _sass folder

  • import your partial(s) into the above "stylesheet".

    ---
---

// this is an empty stylesheet named "style.scss"
// use @import here to load partials from your _sass folder

@import "base";
@import "mixins";

  • link your HTML page with the stylesheet:

    <link rel="stylesheet" type="style/css" href="{{ 'css/style.css' | relative_url }}">

...and done!

Takeaways:

  • Import files from your _sass into a "dedicated stylesheet".
  • The dedicated stylesheet must contain the front matter block (can be empty).
  • Link your HTML file with the dedicated stylesheet.
  • Linked file has a .css extension even if your source file was css/style.scss or css/style.sass
  • You may hard-code the markup or use a Liquid construct to link the stylesheet.
  • When using a Liquid construct, prefer using the relative_url filter instead of using
    {{ 'css/style.css' | prepend: site.baseurl }} or {{ site.baseurl }}/css/style.css

Upvotes: 2

Related Questions