Brand-openedx package changes not reflecting in local Tutor (Ulmo) setup

[FarazM (Muhammad Faraz Maqsood)]

@Mahendra

This exact setup was working correctly in the Teak release, but in Ulmo, the changes are not being applied.

Yes, you are right. These steps used to work in teak when applying theme customizations using the brand-openedx. But in ulmo, we have design tokens & theme variants stuff.

We recently separated design tokens for dark theme in this PR(Link), and these theme variants are available to all MFEs through this piece of code(Link) in ulmo.

There were 2 approaches for development with brand-openedx that we had in mind,

1. Apply scss/css changes to brand-openedx. Run npm run build, commit the dist folder to github. Then copy the raw URL(https://raw.githubusercontent.com/edly-io/brand-openedx/refs/heads/ulmo/indigo/dist/dark.min.css) of our ulmo/indigo branch and paste it here in this code(Link).
   • There was an issue with this approach that with every change, we had to run npm run build, commit the dist folder to github, copy the raw URL of that dark.min.css of that particular commit, as due to some cache related issue. The changes were not reflecting.
2. The approach we followed, we used tutor-contrib-paragon plugin, I’ll write the exact steps

   • git clone https://github.com/openedx/openedx-tutor-plugins.git
     cd openedx-tutor-plugins/plugins/tutor-contrib-paragon
     pip install -e .
     

   • tutor plugins enable paragon
     

   • tutor images build paragon-builder
     

   • tutor dev do paragon-build-tokens
     

   • After these steps, you’ll notice below structure in your tutor env folder.

     

   • What you’ll do is, you will replace min.css URLs in tutor-indigo plugin.py file as shown in below image as using tutor-contrib-paragon plugin, we can host min.css files of PARAGON_THEMES. As using, localhost URLs, weren’t getting cache issue.

     

   • For development example after following above steps, I have made background color changes for learning MFE in both light & dark theme as an example, then run npm run build, you’ll notice dist folder is created again. And you have some changes in brand-openedx/dist/core.min.css file.

     
     

   • You’ll copy the file content from brand-openedx/dist/core.min.css file and paste it into your tutor_env/env/plugins/paragon/compiled-themes/themes/dark/dark.min.css & tutor_env/env/plugins/paragon/compiled-themes/themes/light/light.min.css files.
     

     

   • And run tutor config save && tutor images build mfe && tutor dev start -d, and changes will apply for learning MFE background color.

     
     

I know the steps could be a bit confusing, But thats what we had followed.