Question

Customizing a theme using Scout produces ugly side effects SOLVED

2

I have configured Scout as outlined on https://ux.mendix.com/ When I create a new project using one of the themes it looks great. However as soon as I change a SCSS file, the theme gets currupted. Most visible in the buttons, which have lost their spacing. Steps to reproduce: Open Mendix 5.18 New App I have selected Materialism but it happens with others too. I disabled teamserver, not necessary here Run project Dashboard buttons look fine. Configure and start Scout for the project directory Scout immediately detects a change and generates the custom.css file again. Run the project again Dashboard still OK Add the following to custom.scss: .MyTestClass { color: blue; } Note that actually I added an import here but for reproducing the issue that is not necessary. Run the project again The dashboard buttons have lost their spacing and appear flattened Actually, when comparing custom.css with the version before generation, it appears a lot was changed, including the button padding. Edit 1, 4-8-2015: I tried installing everything on my Win7 laptop and follow your instructions. The dashboard card does turn red. But the buttons are squashed too. Scout appears to be running on a Mac in your screenshots. Are you running Windows 7 in parallels? Could you also test on a Windows machine, not running on a Mac? Edit 2, 5-8-2015: I had a closer look at the differences in the generated custom.css and found the following: lib/base/_all.scss attempts to import compass, which does not exist lib/components/_inputs.scss uses mixins box-shadow and transition for which I cannot find a declaration. lib/components/_buttons.scss uses a calculation to get the padding. The original padding in custom.css was 7px 12px but the new value is 0px 12px causing the buttons to appear squashed. Eveerything seems correct so I don't understand why the calculation results in a zero value. I stopped when I found the cause for the button styling to change, there may be more. The genererated custom.css is large and difficult to compare because the comments are originally generated with a relative path but on my laptop as an absolute path, causing a huge number of differences.

asked 2015-08-04

Marcel Groeneweg ITV

4 answers

Erik Heddema · Answer 1 · 2015-08-04

Hi Marcel,

After our long comment thread I thought it would be better to make a quick how-to in a PDF. Hope this solves your issue. We are working on the how-to's as we speak so that should be finished quickly.

How-to configure Scout and your theme folder

If this still doesn't work it could be that it has something to do with Windows 10 and Scout....we use Windows 7.

EDIT:

How-to URL

Marcel Groeneweg ITV · Answer 2 · 2015-08-05

I finally got it to work correctly.

You need a 32bit Java 7 runtime. You may use http://ninite.com/air-java7 (from a Scout issue on GitHub) to get the right version or download it yourself.
Windows needs to run in English using the settings panel to make US English default. Note that this changes your desktop language!
A rather well hidden option should be used to set the language for non-Unicode programs to US English. Use the search task bar icon to find the control panel and open it. Then select region, administrative tab. The language for non-Unicode programs must be set to US English.

I later tried setting the regional settings back to Dutch and it still worked.

I'm afraid this all might boil down to a decimal point character...

Edit: According to the reply on the issue Erik opened, there is a new release in planning. There is no indication at all when this will be available. As they seem to overhaul Scout with other runtime support it may very well take months to get a stable release. As a whole, the GitHub repo seems to be a pile up of issues without any recent fixes. Seems a dead end to me.

I really hope one of the alternatives with a more active community or other power 'behind' it will work too. I'm more than happy to put some time in helping to get it to work.

I'm sure that does not apply to everyone but if a paid alternative does work and is actively being developed, it might be well worth the investment for us.

Edit 2: The new versions of the DX themes have a new folder structure.

I now use Koala (open source, http://koala-app.com/), which works fine on win10 in Dutch . The general idea is the same, but Koala does not use input and output folders. It automatically recognizes that custom.scss must be compiled to custom.css in the css folder tree, same for lib.scss.

Erik Heddema · Answer 3 · 2015-09-24

I just created an how-to on how to setup the Mendix UI Framework with Koala. It's really easy to use and should run automatically.

Setup Mendix UI Framework with Koala

Simon Black · Answer 4 · 2015-08-04

I haven't seen this issue yet during my testing. But I am going to try this out today and see if I can replicate the same issue. It sounds like you maybe missing the lib css, I think you need to map both the custom.scss folder and the lib one.