Lemmy Support

4650 readers

1 users here now

Support / questions about Lemmy.

Matrix Space: #lemmy-space

founded 5 years ago

MODERATORS

dessalines@lemmy.ml

How to generate CSS files from SCSS files? (tkohhh.social)

submitted 1 year ago by tko@tkohhh.social to c/lemmy_support@lemmy.ml

7 comments fedilink hide all child comments

I'm hoping one of the developers can help point me in the right direction.

I'm trying to create a theme, and I started by downloading the litely.scss and _variables.litely.scss files from the github repo. I renamed the files and made some changes, and then used https://bootstrap.build to generate a css file. I dropped that file (along with my scss files) into the extra_themes directory on my server.

Sure enough, my new theme was available in the list of available themes. However, when I applied the theme, I found that the layout was broken (see screenshot).

So, my question is: how can I generate the css file in the proper manner so as not to break the layout? Is there a specific Bootstrap tool that we should be using to generate the css? Are there additional input files that need to be included in order to generate the correct css?

Thanks for any help you can provide!

top 7 comments

sorted by: hot top controversial new old

[–] neoney@lemmy.neoney.dev 3 points 1 year ago (2 children)

Use the scss compiler.

[–] tko@tkohhh.social 1 points 1 year ago

I've installed dart-sass (instructions here) on my machine, and then ran the compiler on my scss file. I get the following error

Error: Can't find stylesheet to import.
  ╷
1 │ @import "./variables";
  │         ^^^^^^^^^^^^^
  ╵
  _variables.tk.scss 1:9  @import
  tk.scss 1:9             root stylesheet

Where can I find the _variables.scss file that it's looking for?

[–] tko@tkohhh.social 1 points 1 year ago

Is that included in the lemmy install?

[–] tko@tkohhh.social 2 points 1 year ago (1 children)

I think I have this figured out. See my post on it here: https://tkohhh.social/post/4829

[–] neoney@lemmy.neoney.dev 2 points 1 year ago (1 children)

nice! are you sure 5.3.0 is the right version? The wiki says they use v4, but my theme is very broken right now, and I wonder if the fact it’s using v4 is the reason.

[–] tko@tkohhh.social 1 points 1 year ago (1 children)

No, I don't know exactly what version lemmy is using... but I know that version 5.3 works. I had read elsewhere that lemmy 0.18 began using bootstrap 5.2 or something like that. What's written on the wiki is definitely wrong.

[–] neoney@lemmy.neoney.dev 2 points 1 year ago

Oh, thank you, I gotta update then.