NextCloud Themeing: How to compile SCSS

💻 Development
1

Nextcloud version: 20.0.6
Operating system and version: Server version

I would like to create a Nextcloud theme. The goal is to have a theme with my own css and icon set. I have tried to create one following these instructions: Theming Nextcloud — Nextcloud 13 Developer Manual 13 documentation
However, as far as I understand themes in the theme folder seem to be deprecated(?) from version 20 onward (I’m not too clear on this).

So, I tried download the theme breezedark and use it as a template to create my own theme app.

The problem I run into with both of these methods is: I can’t compile the SCSS to the appdata folder where the css is usually read from.

I don’t even know where to start looking and apart from this website in the documentation SCSS — Nextcloud latest Developer Manual latest documentation which does not hold too much information, there is practically nothing I can find on the subject.

So, my question is: how do I compile SCSS in the NextCloud project?

2

Good question.

Have you searched Issues · nextcloud/server · GitHub ?

3

Yes. There is no issue that answers what I am looking for. Not that I can see.

4

Yes, using the theming folder is deprecated. I think it happened around Nextcloud 16.

For Breeze Dark I use the addStyle method found in the Util helper class. If you look at the bottom of this file at function addStyling where I add the stylesheets to Nextcloud, I use

Util::addStyle($this->appName, 'server');

The first argument is the app id, in this case breezedark and the second is the name of the stylesheet I want to add. Specifically I’m adding this stylesheet in which I import everything.

This compiles the sass and adds the compiled stylesheet to the HTML header.

And for good measure here is a link to the method in the API docs: Nextcloud PHP API (master)

I hope that helps.