Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

SCSS Processing With Eleventy

Developing Websites With Eleventy

Published:

Reading Time: (approx) 3 min

Tags that this post has been filed under.

The main content about SCSS Processing With Eleventy

How I Process My SCSS With Eleventy?

I was looking for a way to minimise my CSS load on each page of this website. The main reason being I was loading one massive CSS file for every page, not a good idea.

So what I hoped achieve was to load the minimum CSS for every page and then add in specific CSS when needed to complete a specific page.

I was already using the eleventy-sass plugin, but somehow thought that it would not be the right way to go.

I already have a means to process my js using js-config.js file, which works a treat, so in my mind it was a simple case of applying a similar principle for my SCSS.

A long story short but for me and this approach didn’t work and the easiest method was to use the eleventy-sass plugin with multiple SCSS source files which then use @import to gather together SCSS the relevant SCSS files and merge them.

So I now have a main.scss file that looks like this:

@import 'base/normalise';
@import '../../../node_modules/bulma/sass/utilities/_all';
@import '../../../node_modules/bulma/sass/components/menu';
@import '../../../node_modules/bulma/sass/components/navbar';
@import 'base/config';
@import 'base/breakpoints';
@import 'base/colors';
@import 'base/spacing';
@import 'base/borders';
@import 'base/typography';

@import 'components/buttons';
@import 'components/classes';
@import 'components/icons';
@import 'components/list';
@import 'components/grids';
@import 'components/media';

@import 'sections/layout';
@import 'sections/theme-switcher';
@import 'sections/accessibility';
@import 'sections/header';
@import 'sections/nav';
@import 'sections/main';
@import 'sections/footer';
@import 'sections/scrollup';
@import 'sections/pagination';
@import 'sections/cookie';

And say a contact.scss that looks like this:

@import 'base/breakpoints';
@import 'components/forms';
@import 'sections/contact';

Previously all my SCSS would all be combined in the main.scss, making it rather large.

Thanks to the eleventy-sass plugin which I use like this in my eleventy.config.js

const eleventySass = require('eleventy-sass');
const postcss = require("postcss");
const cssnano = require("cssnano");
const autoprefixer = require("autoprefixer");

module.exports = function (config) {

config.addPlugin(eleventySass, {
  compileOptions: {
    cache: false
  },
  postcss: postcss([cssnano, autoprefixer])
});
};

I can now process each of my SCSS files into CSS optimising them along the way with cssnano and autoprefixer. The way this works is that each scss file is processed to my assets/css folder with the same name so main.scss becomes main.css and likewise contact.scss becomes contact.css.

Once I had each CSS file in my assets/css folder it was then a case of modifying my head.njk partial and the frontmatter to each page to make sure the correct CSS file was added to the correct page.

I did this by adding a pageType to the relevant pages, this for example is the contact page frontmatter:

---
layout: base
permalink: '/contact/'
title: Contact Us
description: "Contact us today, by email, phone, or by the contact form on our website. We will get back to as soon as possible."
keywords:
  - Contact Us
pageType: contact
---

and then modifying my head.njk partial to this:

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="{{ '/assets/styles/main.css' | url | cacheBust }}" media="all" />
  {%- if pageType == "home" %}
  <link rel="stylesheet" href="{{ '/assets/styles/frontpage.css' | url | cacheBust }}" media="all" />
  {%- elseif pageType == "blog" %}
  <link rel="stylesheet" href="{{ '/assets/styles/blog.css' | url | cacheBust }}" media="all" />
  {%- elseif pageType == "contact" %}
  <link rel="stylesheet" href="{{ '/assets/styles/contact.css' | url | cacheBust }}" media="all" />
  {%- elseif pageType == "search" %}
  <link rel="stylesheet" href="{{ '/assets/styles/search.css' | url | cacheBust }}" media="all" />
  {%- elseif pageType == "sitemap" %}
  <link rel="stylesheet" href="{{ '/assets/styles/sitemap.css' | url | cacheBust }}" media="all" />
  {%- endif -%}
  <link rel="stylesheet" href="{{ "/assets/css/print.css" | url | cacheBust }}" type="text/css" media="print" />
</head>

Cache Busting

Just as a side point the cacheBust filter you see in the link above is a very quick and easy filter which works fine for my needs, in my filters.js file I have this simple piece of code:

const timestamp = Math.floor(Date.now() / 1000);

module.exports = {
  cacheBust: function (value) {
    return `${value}?${timestamp}`;
  },
};

I also use this on my js in exactly the same way.

I hope this has been helpful and this shows how easily eleventy and its host of plugins can be easily adapted to suit pretty much any need.

Journal Index

Previous Article: Filtering Content With Kirby CMS

Next Article: Adding Pagefind Search To Eleventy