Custom.css can't import?

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?

1 Like

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?

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.

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");