Custom CSS not loading

[seaque]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I have been using this theme for a long time, I used to be able to generate from chirpy-starter and had customized
_data/origin/cors.yml, assets/css/jekyll-theme-chirpy and had been using _saas/variables-hook.scss to deal easily with version updates, now these files are simply ignored upon both publishing to GH pages and local Jekyll serve.

Operations you have already tried

• Start with clean repository.
• Enable/disable self host assets.

Anything else?

Ruby 3.2.2 (2023-03-30 revision e51014f9c0)
Jekyll 4.3.4

[cotes2020]

The _saas/variables-hook.scss has been deprecated in #2052 of v7.2.0.

If you want to achieve the same effect on the latest starter (v7.2.0+), please follow the example below to override the default values:

In file assets/css/jekyll-theme-chirpy.scss:

---
---

+@use 'abstracts/variables' with ( 
+  $sidebar-width: 250px 
+);

@use 'main
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%}
';

/* append your custom style below */

[seaque]

Sorry, I update rarely so must've missed that one.

Still though, can't get rid of this error.

Error: expected "$".
  ╷
3 │   $font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  │                             ^
  ╵

Only one font without comma works. Which is far than ideal.

Same error even with default ones

Error: expected "$".
  ╷
3 │ $font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
  │                                       ^
  ╵

[iSpeakNerd]

hey @cotes2020 i appended custom scss for custom icons as font using what you suggested, but it made my whole site render weird on remote, on local it looked fine. any ideas here?

here's what i did

1. follow steps to create custom icons as fonts from Custom (non Font Awesome) icons for `contact.yml` #1763 (comment)
2. overwrite default chirpy theme css file with appended css from icomoon solution, inspired by coates Custom CSS not loading #2158 (comment)

---
---

@use 'main
{%- if jekyll.environment == ' production ' -%}
  .bundle
{%- endif -%}
';

/* append your custom style below */

@font-face {
  font-family: 'icomoon';
  src: url('/assets/fonts/icomoon.eot?weotyf');
  src: url('/assets/fonts/icomoon.eot?weotyf#iefix') format('embedded-opentype'),
    url('/assets/fonts/icomoon.ttf?weotyf') format('truetype'),
    url('/assets/fonts/icomoon.woff?weotyf') format('woff'),
    url('/assets/fonts/icomoon.svg?weotyf#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^='icon-'],
[class*=' icon-'] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fc-arch:before {
  content: '\e900';
}

3. add custom contact links in _data/contact.yml following suggestion by @SoumyaK4 How do I add custom social links in chirpy? #2172 (comment)

- type: farcaster
  icon: "icon-fc-arch"
  url: "https://warpcast.com/ispeaknerd"

[shalomthegreat]

@cotes2020 is this a common approach to handling theme overrides in Jekyll?

[fabiendibot]

@cotes2020 same problem as @iSpeakNerd here, appending the css file to override default CSS is breaking the site on github pages but not locally.

[tis-starlight]

See #2345 (comment) , #2172 (reply in thread) , #2353 (comment) .