How to have different styling for each Module in my app?

0
I have a running app with styling. I just recently upgraded to the new scss setup of Mendix 9. I made a special UI module with all custom styling in it. This works fine. A colleague created a new module in her own app and gave it it's own styling by making it a UI module with all the styling in the module. In her app this works fine. I now imported her module in my app but now her styling is used in all modules in my app. I have tried all documentation and guides but I cannot find an example about limiting the custom styling to its own module. Is this even possible?     
asked
1 answers
1

There is a good blog by Jason Teunissen about Mendix Modular Design System https://medium.com/mendix/setting-up-your-modular-design-system-in-mendix-9-6-eed2d0063411 it will tell you a lot about how this works and the routing principles. However it doesn't really cover your question of limiting styles to your specific module. The way Mendix (and scss imports work) is that it loads everything defined in the imports, so the entire project has access to all the classes defined, the order of loading and specificity still determines which styling/class is applied.

What you could do:

  1. Change the load order (see blog) so that the imported UI module is overwritten by project specific UI module
  2. Set exclusions (see blog) so elements, building blocks or SCSS of that module is not loaded
  3. Create separate layouts where pages in Module X only uses the layout of Module X and on that layout you add a class —open the layout, click on the canvas (not on any of the elements) and add a class like layout-module-x— this class is used in the SCSS (SASS) files to scope all layout classes to layout-module-x (nest all the classes within the class .layout-module-x).

 

answered