In self-hosted, where should I put the ".scss" file for the theme?

Hello
I installed Taiga from source code on a server that I manage.
I want to change Taiga’s appearance, so I’m trying to use the THEME function.
However, the “/app/themes” folder written in the document cannot be found under the folder where Taiga is installed.
https://docs.taiga.io/#themes

On the other hand, the default theme “taiga” is listed in “dist/conf.json”.

     "themes": [
         "taiga"
     ],
     "defaultTheme": "taiga",

And when I looked at the article below, it said that “variables.scss” and “custom.scss” needed to be duplicated from the github repository.

However, the “app/themes” folder is not found.
Could you please tell me where to put “variables.scss” and “custom.scss”?

thank you.

Hi there,

It seems you have installed the compiled version, GitHub - taigaio/taiga-front-dist.

If you want to change and modify themes, as far as I know you need to download this repo: GitHub - taigaio/taiga-front add/modify the themes, and compile it yourself.

Hope this helps!

Regards!

1 Like

Thank you very much for your answer and advice.
Indeed I installed “taiga-front-dist”.
I didn’t think there was any other way.

I looked for documentation on how to compile “taiga-front” and found “Taiga: Setup development environment”.
https://docs.taiga.io/setup-development.html

Unfortunately, I’m not an expert in web programming. (I even found out about gulp for the first time)
So, I would appreciate it if you could answer two additional questions.

(1) To compile “taiga-front”, should I follow this “Setup development environment”? (“4.3 Final steps” ends with running “npm start”)

(2) Should I reconfigure not only “taiga-front” but also “taiga-back” and “taiga-events” according to the “Setup development environment” and operate with these three modules?
The production environment on my server consists of five modules: “taiga-back”, “taiga-async-tasks”, “taiga-front-dist”, “taiga-events”, and “taiga-protected”.
I’m concerned that the dependencies and collaboration methods may be different between my production environment and the development environment I’m about to create.
Of course, if there are no particular problems, I’d like to just compile “taiga-front”.

Thank you for your help.

Hi again!

Firstly, the different components are independent enough that, unless major versions change or there are specific changes to take into account, you do not need to worry about that. So let’s focus on taiga-front for this.

You do not really need the development environment (though it will be nice that you have it locally for developing your theme and trying it out).

I’m no expert in the process, but maybe someone else in the community can chime in, but as far as I remember, you need to do:

  • Install nvm to make sure you use the same version that the project requires.
  • Go to the taiga-front repository and run nvm install.
  • Once installed, nvm use.
  • Run npm ci to make a clean install of the project modules.
  • Run npx gulp deploy, if it’s the first time it will ask you to install gulp.
  • Copy all the contents of your new dist folder to your installed taiga-front folder (and replace everything, of course).

That should be it, hope this helps and is not too confusing.

Best regards!

1 Like