CSS not being built in Eleventy

Support
1

I’ve been developing a site locally and built it using netlify dev without any problem. However, when I build on Netlify the css changes I’ve made in the repo (pushed to Github) don’t get built. There are no errors in the build log and everything seems OK except the css changes I want aren’t on the site.

I’ve tried “clear cache & deploy” a couple of times. I’ve also loaded the site in a private window to avoid local caching. Any ideas of what I can do other than nuking the site and starting again would be great.

Site: https://jmd-garden.netlify.app/
Github repo: GitHub - docherty/is.jmd.garden

Most recent deploy log:

7:44:24 PM: Starting post processing
7:44:25 PM: Skipping HTML post processing
7:44:25 PM: Post processing - header rules
7:44:25 PM: Post processing - redirect rules
7:44:25 PM: Post processing done
7:44:25 PM: Section completed: postprocessing
7:44:26 PM: Site is live :sparkles:
7:43:50 PM: build-image version: ad28fb91fae632ef7f2e4d659a892d68ee2681a6 (focal)
7:43:50 PM: buildbot version: 751c8de2ba48c52549712392ca0244c53d39c3c1
7:43:51 PM: Building without cache
7:43:51 PM: Starting to prepare the repo for build
7:43:51 PM: No cached dependencies found. Cloning fresh repo
7:43:51 PM: git clone --filter=blob:none git@github.com:docherty/is.jmd.garden
7:43:51 PM: Preparing Git Reference refs/heads/main
7:43:53 PM: Starting to install dependencies
7:43:54 PM: Python version set to 3.8
7:43:54 PM: Attempting Ruby version 2.7.2, read from environment
7:43:54 PM: Using Ruby version 2.7.2
7:43:55 PM: Started restoring cached go cache
7:43:55 PM: Finished restoring cached go cache
7:43:55 PM: go version go1.19.11 linux/amd64
7:43:55 PM: Using PHP version 8.0
7:43:56 PM: Attempting Node.js version ‘v18’ from .nvmrc
7:43:57 PM: v18.17.0 is already installed.
7:43:57 PM: Now using node v18.17.0 (npm v9.6.7)
7:43:57 PM: Enabling Node.js Corepack
7:43:57 PM: Started restoring cached build plugins
7:43:57 PM: Finished restoring cached build plugins
7:43:57 PM: Started restoring cached corepack dependencies
7:43:57 PM: Finished restoring cached corepack dependencies
7:43:57 PM: No npm workspaces detected
7:43:57 PM: Started restoring cached node modules
7:43:57 PM: Finished restoring cached node modules
7:43:57 PM: Installing npm packages using npm version 9.6.7
7:44:08 PM: added 245 packages, and audited 246 packages in 10s
7:44:08 PM: 46 packages are looking for funding
7:44:08 PM: run npm fund for details
7:44:08 PM: found 0 vulnerabilities
7:44:08 PM: npm packages installed
7:44:08 PM: Install dependencies script success
7:44:08 PM: Starting build script
7:44:09 PM: Detected 1 framework(s)
7:44:09 PM: eleventy at version 2.0.1
7:44:09 PM: Section completed: initializing
7:44:10 PM: ​
7:44:10 PM: Netlify Build
7:44:10 PM: ────────────────────────────────────────────────────────────────
7:44:10 PM: ​
7:44:10 PM: ❯ Version
7:44:10 PM: @netlify/build 29.17.1
7:44:10 PM: ​
7:44:10 PM: ❯ Flags
7:44:10 PM: baseRelDir: true
7:44:10 PM: buildId: 64c16963501a6637703f08fe
7:44:10 PM: deployId: 64c16963501a6637703f0900
7:44:10 PM: ​
7:44:10 PM: ❯ Current directory
7:44:10 PM: /opt/build/repo
7:44:10 PM: ​
7:44:10 PM: ❯ Config file
7:44:10 PM: /opt/build/repo/netlify.toml
7:44:10 PM: ​
7:44:10 PM: ❯ Context
7:44:10 PM: production
7:44:11 PM: ​
7:44:11 PM: ❯ Installing plugins
7:44:11 PM: - @netlify/plugin-lighthouse@5.0.0
7:44:21 PM: ​
7:44:21 PM: ❯ Loading plugins
7:44:21 PM: - @netlify/plugin-lighthouse@5.0.0 from Netlify app
7:44:23 PM: ​
7:44:23 PM: build.command from netlify.toml
7:44:23 PM: ────────────────────────────────────────────────────────────────
7:44:23 PM: ​
7:44:23 PM: $ npm run build
7:44:23 PM: > 11ty-purple@1.0.0 build
7:44:23 PM: > npm run build:stylus && npm run build:11ty
7:44:23 PM: > 11ty-purple@1.0.0 build:stylus
7:44:23 PM: > stylus --compress ./stylus/ --out ./static/css/
7:44:23 PM: compiled static/css/main.css
7:44:23 PM: > 11ty-purple@1.0.0 build:11ty
7:44:23 PM: > eleventy
7:44:24 PM: [11ty] Writing _site/atom.xml from ./feed.xml.njk
7:44:24 PM: [11ty] Writing _site/sitemap.xml from ./sitemap.xml.njk
7:44:24 PM: [11ty] Writing _site/index.html from ./index.njk
7:44:24 PM: [11ty] Writing _site/tags/digital-gardening/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/setup/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/online-tools/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/seedling/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/metaverse/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/m3/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/ideas/index.html from ./tags.njk
7:44:24 PM: [11ty] Writing _site/tags/index.html from ./tagslist.njk
7:44:24 PM: [11ty] Writing _site/posts/configuring-digital-garden/index.html from ./posts/configuring-digital-garden.md (liquid)
7:44:24 PM: [11ty] Writing _site/posts/m3-base/index.html from ./posts/m3-base.md (liquid)
7:44:24 PM: [11ty] Writing _site/pages/now/index.html from ./pages/now.md (liquid)
7:44:24 PM: [11ty] Writing _site/pages/about/index.html from ./pages/about.md (liquid)
7:44:24 PM: [11ty] Copied 28 files / Wrote 15 files in 0.59 seconds (39.3ms each, v2.0.1)
7:44:24 PM: ​
7:44:24 PM: (build.command completed in 1.5s)
7:44:24 PM: ​
7:44:24 PM: Deploy site
7:44:24 PM: ────────────────────────────────────────────────────────────────
7:44:24 PM: ​
7:44:24 PM: Starting to deploy site from ‘_site’
7:44:24 PM: Calculating files to upload
7:44:24 PM: 4 new files to upload
7:44:24 PM: 0 new functions to upload
7:44:24 PM: Section completed: deploying
7:44:26 PM: Finished waiting for live deploy in 2.043s
7:44:26 PM: Site deploy was successfully initiated
7:44:26 PM: ​
7:44:26 PM: (Deploy site completed in 2.2s)
7:44:26 PM: ​
7:44:26 PM: @netlify/plugin-lighthouse (onSuccess event)
7:44:26 PM: ────────────────────────────────────────────────────────────────
7:44:26 PM: ​
7:44:26 PM: Generating Lighthouse report. This may take a minute…
7:44:26 PM: Running Lighthouse on /
7:44:38 PM: Lighthouse scores for /
7:44:38 PM: - Performance: 100
7:44:38 PM: - Accessibility: 89
7:44:38 PM: - Best Practices: 100
7:44:38 PM: - SEO: 92
7:44:38 PM: - PWA: 30
7:44:38 PM: ​
7:44:38 PM: (@netlify/plugin-lighthouse onSuccess completed in 11.6s)
7:44:38 PM: ​
7:44:38 PM: Netlify Build Complete
7:44:38 PM: ────────────────────────────────────────────────────────────────
7:44:38 PM: ​
7:44:38 PM: (Netlify Build completed in 27.6s)
7:44:39 PM: Caching artifacts
7:44:39 PM: Started saving node modules
7:44:39 PM: Finished saving node modules
7:44:39 PM: Started saving build plugins
7:44:39 PM: Finished saving build plugins
7:44:39 PM: Started saving corepack cache
7:44:39 PM: Finished saving corepack cache
7:44:39 PM: Started saving pip cache
7:44:39 PM: Finished saving pip cache
7:44:39 PM: Started saving emacs cask dependencies
7:44:39 PM: Finished saving emacs cask dependencies
7:44:39 PM: Started saving maven dependencies
7:44:39 PM: Finished saving maven dependencies
7:44:39 PM: Started saving boot dependencies
7:44:39 PM: Finished saving boot dependencies
7:44:39 PM: Started saving rust rustup cache
7:44:39 PM: Finished saving rust rustup cache
7:44:39 PM: Started saving go dependencies
7:44:39 PM: Finished saving go dependencies
7:44:39 PM: Build script success
7:44:39 PM: Section completed: building
7:44:40 PM: Uploading Cache of size 298.6MB
7:44:43 PM: Section completed: cleanup
7:44:43 PM: Finished processing build request in 52.471s

Build settings:

image
image1022×1502 120 KB

Sorry, I can’t add the rest of the screenshot as I’m a new user!

2

I checked your site and I can see CSS being applied. Is this resolved?

3

Thank you. There is CSS being applied but it isn’t the correct version because the CSS isn’t being built from the repo. Here’s a simple way of checking:
Local dev server:
image

Deployed site (see above notes):
image

There are more significant differences (the search box) but this is a quick check.

4

I think this is working as expected. Your updated styles are comitted to your git repo: is.jmd.garden/static/css/main.css at main · docherty/is.jmd.garden (github.com) as built files.

However, based on these lines: Deploy details | Deploys | jmd-garden | Netlify, it appears you’re building CSS during the site’s build stage and not directly using it from the repo. Based on the commands, it appears you’re compiling the files from these lines: is.jmd.garden/stylus/layout/navbar.styl at main · docherty/is.jmd.garden (github.com) and that’s where the incorrect CSS is coming from.

This is not a Netlify issue, your setup doesn’t seem to agree with what you’re trying to do.

5

Thank you for looking into this for me - this makes some sense. As a novice to 11ty and Netlify, what I don’t understand is the disparity in behaviour between the local dev environment and the live deploy. If it’s showing the CSS one way on the dev server and another way after a deploy that makes developing pretty tricky. How do I create a dev workflow that means what I’m seeing in dev is replicated when it’s deployed?

6

I don’t know how you’re seeing what you’re seing locally, but I just tried your repo and got the same behaviour as production:

image
image832×359 16 KB

1 Like
7

Thank you, that’s really helpful. I’ll nuke everything locally and start afresh and hopefully I get dev and production in sync again. Thanks again for your help.

8

Hi, I’m glad you found a solution!