Custom.css can't import?

Questions & Help
1

I’m trying to get my custom.css load another stylesheet file on the same level in the same logseq folder. The following methods aren’t working for me:

  • adding @import url('extra.css') or @import 'extra.css':
    • at the top of custom.css
    • at :custom-css-url of config.edn (with " wrapping around @import)
  • adding @@html: <link rel="stylesheet" href="extra.css"> @@ to a block
  • refreshing the graph or restarting the app

Is this a limitation inherent to the app?

2 Likes
2

So far I’ve only been able to get import working via an absolute path for the additional css. Not ideal and not very portable.

Are relative paths disabled?

3

I haven’t dug in very far, but I have found that it loads the custom.css as a data-url instead of referencing the file on the filesystem. This probably has something to do with why we can’t import.

UPDATE: It looks like you can import, but you have to do it with an absolute path. For example:

@import url('assets://C:/Path/to/LogSeq/graph/logseq/css/other.css');

I’m going to keep trying to find a way to do it with a relative path, but given the way that LogSeq loads custom.css I’m not enthusiastic.

4

This may not be a perfect solution but I found that one can use relative path to import CSS files from the graph’s assets directory

@import url("../assets/custom/header_label.css");
4 Likes
5

Sadly it seems this doesn’t work on Android :pensive:

6

Do you guys think people would benefit in having these lines added to the notes in config.edn? Currently there is only an example that shows how to import a custom .css from the web:

;; Specify a custom CSS import.\n ;;
This option takes precedence over the local logseq/custom.css file.\n
;; Example usage:\n
;; :custom-css-url “@import url('https://cdn.jsdelivr.net/gh/dracula/logseq@master/custom.css\');”\n

7

Windows 10, Logseq 0.9.8
I can’t seem to make this work, can you double check? What OS are you using?