How to keep AtlasUI updateable and still customize your own SASS files?

4
Currently when I download AtlasUI from the AppStore it will overwrite all my own written styling. This can make someone really sad. When Atlas UI is updated regularly and you've just finished copy pasting all your own custom classes in each separate SASS file. So I was wondering what do other people do to upgrade AtlasUI besides cry?
asked
3 answers
2

We have encoutered a similar problem. We solved this by isolating the custom styling files in a ‘theme-custom’ folder which is a sibling to the theme folder.  After upgrading the UI Resources Module the theme folder wil be overwritten but the theme-custom folder will not be changed.

After (re)adding the following line to custom.scss you are good to go:

@import "../../../../theme-custom/custom";  

answered
1

Hi Marnix, 

This is one of the problems of how MX currently deals with “styling”.

Currently we are running in to this problems with the micro service architecture as well, where there is one custom sass folder within themes, that we manualy sync every week or so.

Another point to note is that most styling is composed of a Mendix module + SASS files which sync differently, and are loaded into a project differently.

 

Currently we are trying out this model.

The sync order of sass is:

  • Bootstrap3
  • mxui.css
  • Atlas
  • Partner ui framework
  • Company specific
  • Project specific

 

We also have our own MX modules:

  • Partner ui framework
  • Company specific
  • Project specific

 

We have also noticed that Atlas gets updated regularly on github.

Our (Pim & Me) current prototype solution is a gulp script that updates the atlas sass, and partner and company without messing with the files in themes folder.

This does have it own pro’s and cons.

Friday I will start testing the gulp file to see if we run into any other random things.

But preferably Mendix needs to come up with a scalable solution for syncing styling modules and sass over the different levels of ui design within projects.

answered
0

Hi Marnix,

I’ve renamed my custom variables file and then altered the mapping file. You can find the mapping file in ...\Mendix\DLM-main\theme\styles\css\lib.

By altering the first bit, the “sources” from “custom/custom-variables.scss” to “custom/<your-name>” the file will probably not be overwritten anymore!

Hope this helps.

Tijmen

answered